php form sending to handler - javascript

I did an assignment and ended up with this correct code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Assignment 2</title>
<script type="text/javascript">
var imageURLs = [
"p1.jpg"
, "p2.jpg"
, "p3.jpg"
, "p4.jpg"
];
function getImageTag() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"Some alt text\"/>';
return img;
}
$(document).ready(function() {
$("img").on("click", function(event) {
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;
alert("X Coordinate: " + x + " Y Coordinate: " + y);
});
});
</script>
</head>
<body>
<script type="text/javascript">
document.write(getImageTag());
</script>
</body>
</html>
so now the next assignment says this: Your task is to add some validation to task 1B, by creating two PHP scripts.
The first PHP script that will create an HTML document that contains an img tag that is randomly selected. The HTML document will contain a form that will be used to store and send data (the click co-ordinates) to the second (handler) script.
The second PHP script is the handler that will check the submitted coordinates with the answer. If the click is within 10 pixels of the answer, show the user a congratulations message, otherwise compute how far they were off from the answer. You should also display the number of seconds it took for the user to send their answer.
Hint: The first script needs to send data to the second script, namely the current timestamp and a value that represents which image is being presented to the user. The first script can send this data to the second script by using hidden input fields.
and is followed by this:
Image and Answer Data
$puzzles = array (
array( 'src' => "http://307.myweb.cs.uwindsor.ca/samples/wheres_waldo/pics/p2.jpg",
'x' => 235,
'y' => 389),
array( 'src' => "http://307.myweb.cs.uwindsor.ca/samples/wheres_waldo/pics/p3.jpg",
'x' => 437,
'y' => 221),
array( 'src' => "http://307.myweb.cs.uwindsor.ca/samples/wheres_waldo/pics/p4.jpg",
'x' => 469,
'y' => 110),
);
I have no idea that they are even asking of me and am very confused, if anyone can help me it would be greatly appreciated!

This is what I think they are asking:
Script 1- show a random image, and when user clicks on an image, send the coordinates and the time it took since the puzzle started. The hint is to use form fields. So you need to create a form with hidden input fields. When user clicks on an image, set the values of these fields (time, coordinates, image name,etc.) and submit the form. Form needs to be handled by script two.
Script 2- decide if user should be shown win, lose or try again message, and relay this reply to the user.

Related

How to get ID of an element at a particular coordinate by javascript

Consider there is a DIV on a blank browser page at coordinate (2,2) in pixels and a button.If i click on the button it must send the coordinates (2,2) to function which will DETECT what is at (2,2) whether it is a DIV , a BUTTON , etc and also return its ID.
Here is what i tried :
<!DOCTYPE html>
<html lang="en">
<head>
<title>elementFromPoint example</title>
<script>
function changeColor(newColor) {
//To get element from coordinate 2,2
var elem = document.elementFromPoint(2, 2);
//Here i wanted to print what i am getting in var elem
document.getElementById("status").innerHTML = elem;
//next line changes color whatever is at 2,2
elem.style.color = newColor;
//But i want to know whats at 2,2 or get its ID or class.
}
</script>
</head>
<body>
<p id="para1">Some text here</p> <button onclick="changeColor('blue');">blue</button> <span id="status"></span> </body>
</html>
But by this method i am only able to change its color, but i am stuck on how can i get its ID or TYPE (div/ button / para / etc).
var elem = document.elementFromPoint(2, 2); gives you the element reference and id is a property of that element
Try
console.log(elem.id);
for type
console.log(elem.tagName);
To update your status something like:
document.getElementById("status").innerHTML = 'ID:' +elem.id +' , Tag:' +elem.tagName;

navigating to url with variable javascript or php

i need help with my code to make it right, all my code is fine i just need some one to edit it for me and add this few things
on the page i have video buttons, and iframe, and embed code area
when i click on video button, video 1 or video 2, the data-str will change in iframe src and in embed code area also it will get that data-str value from button to url to make it like this domain.com/test/page1.php?video=0_MfMUN_FNM
that is all fine it is as i want it. but the problem is, when i go to domain.com/test/page1.php?video=0_MfMUN_FNM it doesn't load the video that is in video 3 with data-str"0_MfMUN_FNM" it will load default one as it's on video 1 when 10 seconds are done.
so i want it to be like, when i go to domain.com/test/page1.php?video=0_MfMUN_FNM instead of domain.com/test/page1.php then video 3 most be selected because variable on url is "0_MfMUN_FNM" and after 10 seconds that should be playing instead of default one.
here's my full code on plnkr http://plnkr.co/edit/LhxRjJXBnCGKGfW4ZLWO?p=preview
here's my javascript code
<script>
$(document).ready(function() {
//action listener for video_link class
$('.video_link').click(function(e) {
e.preventDefault();
$('.frame_src').attr('src', 'https://www.youtube.com/embed/' + $(this).data('str'));
window.history.pushState({},"",window.location.origin + window.location.pathname + '?video=' + $(this).data('str'));
});
$(".frame_src").attr("data-src", "https://www.youtube.com/embed/p9zdCra9gCE");
var t = "p9zdCra9gCE",
e = $(".embed_code").attr("data-content");
e = e.replace("[videoID]", t), $(".embed_code").html(e), $(".video_button").slideDown(), $(".video_link").click(function() {
$(".reloadframe").show();
var t = $(this).attr("data-str"),
e = "https://www.youtube.com/embed/" + t + "",
a = $(".embed_code").attr("data-content");
a = a.replace("[videoID]", t), $(".embed_code").html(a), $(".frame_src").attr("src", e), clearInterval(interval), document.querySelector(".load_video").style.display = "none", $(".frame_src").show()
})
});
</script>

Re-use a jquery function feeding it a php variable instead of html

Basically i have a jquery script that reads the value in a drop down list (Country list, the script looks for the hidden ISO value) and displays a flag accordingly using the letters as coordinates on a sprite sheet.
Here is the code:
// FLAGS
(function($) {
// size = flag size + spacing
var default_size = {
w: 20,
h: 15
};
function calcPos(letter, size) {
return -(letter.toLowerCase().charCodeAt(0) - 97) * size;
}
$.fn.setFlagPosition = function(iso, size) {
size || (size = default_size);
return $(this).css('background-position',
[calcPos(iso[1], size.w), 'px ', calcPos(iso[0], size.h), 'px'].join(''));
};
// USAGE:
$(function() {
// on load:
$('select[name="country"]').on('change', function(){
$('.country i').setFlagPosition($(this).val())[0].nextSibling.nodeValue = $(':selected', this).text();
});
});
})(jQuery);
The usage part is probably the relevant part here, but i included everything for completeness.
I would now like to reuse this "sprite searching and displaying code" elsewhere on the site, but instead of relying on the drop down value, i would like it to simply look at the value of a php variable (for example $country) witch will contain an iso code identical to the one provided by the drop down list.
I am unsure how to pass the php variable from php to jquery, and how to make the "usage" part use that instead.
So i have var "$country" and i would like the script to apply its changes to a div called "countryflag".
The sprite is loaded as a background in .country i in the above script by the way, in case someone was wondering how it was fetching it.
You can echo the php variable to a javascript variable as
<script>
var country_code = '<?php echo $country; ?>';
$(document).ready(function(){
$('#div_id').setFlagPosition(country_code);
});
</script>
If i got it right you can use the country_code as this.

Conversion Tag on Event

I am trying to get a conversion pixel on a button tag, I want this pixel to fire when a user agrees to hit the submit button, and the URL does not change (just a thank you message pops up on the page). I already have a conversion tag on the page, but want to count those that hit this action button separately. Any help would be appreciated.
<html>
<body>
click here
<script language="javascript">
<!--
function ftGoalTag19212(){
var ftRand = Math.random() + "";
var num = ftRand * 1000000000000000000;
var ftGoalTagPix19212 = new Image();
ftGoalTagPix19212.src = "http://servedby.flashtalking.com/spot/2531;19212;1515/?spotName=Demo_Thank_You&cachebuster="+num;
ftGoalTagPix19212.onload = ftLoaded19212;
}function ftLoaded19212() {
top.location.href="http://www.UrlGoesHere.pdf";
}
// -->
</script>
</body>
</HTML>

data-* doesn't update after click

I am trying to update data-coords (11th line), but when I do it the code runs but the data-coords don't update. Why? It looks valid to me, am I missing something?
$(document).on('click', '.next-prev-js', function (e) {
var item = e.target;
if($(item).is("img") && tagging){
var offset = $(item).offset();
var imgid = $(item).attr("data-image-id");
var obi = $("#blackout-image").offset();
x = (e.clientX - offset.left);
y = (e.clientY - offset.top);
addTag(e.clientX - obi.left - 55, e.clientY - 55);
saveCoords(x, y, imgid);
$(item).attr("data-coords", x+","+y);
tagging = false;
$(".tag-self").text("Tag yourself");
$("#blackout-image img").css({cursor: "pointer"});
$("#blackout-image .face").delay(3000).fadeOut("fast");
return false;
}
var action = $(item).attr("data-action");
nextPrevImage(action);
return false;
});
Here is the HTML portion (This is inside a php echo statement):
<a class='thumb-photo' href=''>
<img class='thumb-img' data-coords='$x,$y' data-id='$id' data-image-id='$imid' data-file='$f' src='/user-data/images/image.php?id=$id&file=$f&height=240&width=240' width='240' height='240' />
</a>
Demo
(Don't refresh the page during this process)
If you click on one of the images, it will open in a viewer .
On the left hover over "Where is He" and a square will show where the data-coords are (from thumbnail image)
Next click on "Tag yourself", then click on a location in the image.
Close the viewer by pressing "esc" or clicking on the transparent area
Click on the image again, and mouse over "Where is He" the coords are still the old coords, but they should have been updated after you clicked on the new location
http://wows.phpsnips.com/profile.php?id=1&tab=photos
You should use the data method.
$(item).data({coords: x+","+y});
or
$(item).data("coords", x+","+y);
works in jsfiddle.
You can see your data attributes with:
console.log($(item).data());
The way the data- attributes work is that the value gets copied into the jQuery data object on page load. After that they aren't really connected anymore. So if you change the attribute, the object won't update automatically. Same for the other way around.
I made a quick test to demonstrate the behavior:
jQuery:
var $d = $('div');
alert('Load: Attribute "a" gets copied to data object.\rData Attribute: ' + $d.attr('data-test') + '\rData Object: ' + $d.data('test'));
$d.attr('data-test','b');
alert('Changed attribute to "b". Attribute changed, object still "a".\rData Attribute: ' + $d.attr('data-test') + '\rData Object: ' + $d.data('test'));
$d.data('test','c');
alert('Changed data object to "c". Object changed, attribute still "b".\rData Attribute: ' + $d.attr('data-test') + '\rData Object: ' + $d.data('test'));
Demo:
http://jsfiddle.net/F5qkq/
So in your case, you only change the data attribute with attr but that way the internal data-object remains the same because they aren't connected anymore.
The data-attribute is only really used to initialize the data object with a startvalue. But after that, as said before, you should only work with jQuery's data function to change the internal data object.

Categories