Hi,
I have this javascript script (below) and the submit button doesn’t give the results of the test. The reset button seems to be working correctly. I’m wondering if some of the coding might be deprecated. Would you have any idea of the the solution? Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Clases particulares de inglés </title>
<link rel="shortcut icon"
href="http://www.profesornativo.com/favicon.ico?v=2" >
<meta name="viewport" content="width=device-width,
initial-scale=1.0" >
<meta name="robots" content="index, follow">
<meta name="description" content="">
<meta name="author" content="" >
<meta name="keywords" content="">
<style>
ol li {
background-image: none;
padding:10px;
}
</style>
<link rel='stylesheet' type='text/css' href='nativo.css' >
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="pagewrap">
<div id="container">
<div id="content">
<h4>Select the correct sentence. </h4>
<div class="information">
<form method="post" autocomplete="off">
<div class="question"><table> <tr><td class="do">
<strong> 1:</strong><br> </td><td>
<label> <input type="radio" name="one" value="a"> Do you seen
the
match yesterday?</label> <br>
<label> <input type="radio" name="one" value="b"> Did you saw
the match yesterday?</label> <br>
<label> <input type="radio" name="one" value="c"> Did you see
the match yesterday? </label> </td> </tr> </table>
</div>
<div class="question"><table> <tr><td class="do">
<strong> 2:</strong><br> </td><td>
<label><input type="radio" name="two" value="a"> Where you
lived when you were a child?</label> <br>
<label><input type="radio" name="two" value="b" > Where did you
live when you were a child? </label> <br>
<label><input type="radio" name="two" value="c"> Where you did
live when you were a child? </label> </td> </tr> </table>
</div>
<div class="question"><table> <tr><td class="do">
<strong>3:</strong><br> </td><td>
<label><input type="radio" name="three" value="a"> I don't live
in Barcelona now. </label> <br>
<label><input type="radio" name="three" value="b"> I doesn't
live in Barcelona now. </label> <br>
<label><input type="radio" name="three" value="c"> I no live in
Barcelona now. </label> </td> </tr> </table>
</div>
<div class="question"><table> <tr><td class="do">
<strong> 4:</strong><br> </td><td>
<label><input type="radio" name="four" value="a"> He don't want
to buy a new smartphone.</label> <br>
<label><input type="radio" name="four" value="b"> He doesn't
want buy a new smartphone.</label> <br>
<label><input type="radio" name="four" value="c"> He doesn't
want to buy a new smartphone. </label> </td> </tr> </table>
<div class="question">
</div>
</div>
<div class="question"><table> <tr><td class="do">
<strong> 5:</strong><br> </td><td>
<label><input type="radio" name="five" value="a"> We don't like
football. </label> <br>
<label><input type="radio" name="five" value="b"> We not like
football.</label> <br>
<label><input type="radio" name="five" value="c"> We like not
football.</label> </tr> </table>
</div>
<div class="question"><table> <tr><td class="do">
<strong> 6:</strong><br> </td><td>
<label><input type="radio" name="six" value="a"> She don't work
here now. </label> <br>
<label><input type="radio" name="six" value="b"> She doesn't
work here now. </label> <br>
<label><input type="radio" name="six" value="c"> She not work
here now.</label> </td> </tr> </table>
</div>
<div class="question"><table> <tr><td class="do">
<strong> 7:</strong><br> </td><td>
<label><input type="radio" name="seven" value="a"> Do your
sister work in a bank? </label> <br>
<label><input type="radio" name="seven" value="b"> Your sister
does work in a bank?She doesn't work here now. </label> <br>
<label><input type="radio" name="seven" value="c"> Does your
sister work in a bank?</label> </td> </tr> </table>
</div>
<div class="question"><table> <tr><td class="do">
<strong> 8:</strong><br> </td><td>
<label><input type="radio" name="eight" value="a"> What do your
brother do? </label> <br>
<label><input type="radio" name="eight" value="b"> What your
brother does? </label> <br>
<label><input type="radio" name="eight" value="c"> What does
your brother do?</label> </td> </tr> </table>
</div>
<div class="question"><table> <tr><td class="do">
<strong> 9:</strong><br> </td><td>
<label><input type="radio" name="nine" value="a"> What kind of
music they do like? </label> <br>
<label><input type="radio" name="nine" value="b"> What kind of
music does they like?</label> <br>
<label><input type="radio" name="nine" value="c"> What kind of
music do they like?</label> </td> </tr> </table>
</div>
<div class="question"><table> <tr><td class="do">
<strong> 10:</strong><br> </td><td>
<label><input type="radio" name="ten" value="a"> When did she
decide to emigrate? </label> <br>
<label><input type="radio" name="ten" value="b"> When she
decided to emigrate? </label> <br>
<label><input type="radio" name="ten" value="c"> When she did
decide to emigrate? </label> </td> </tr> </table>
</div>
<div id="score"></div>
<div class="buttons">
<input type="submit" id="submit" value="Submit">
<input type="reset" class="reset" id="reset" name="reset"
value="Reset">
</div>
</form>
</div>
</div>
</div>
</div>
<script>
/*global $:false */
function clearAnswerImages(){
$("img").remove();
}
function mark(el, status){
var images = {
correct: "http://www.profesornativo.com/tick.jpg",
incorrect: "http://www.profesornativo.com/x.jpg",
unanswered: "http://www.profesornativo.com/q.jpg",
},
img = new Image();
img.src = images[status];
img.className = status;
el.append(img);
}
function displayScore(){
var numQuestions = $(".question").length,
questionsCorrect = $("img.correct").length;
$("#score").html("You got " + questionsCorrect + " out of " +
numQuestions);
}
$("form").on("submit", function(e){
e.preventDefault();
clearAnswerImages();
var $questions = $(".question");
$questions.each(function(){
var answer = $(this).find("input:checked"),
key = answer.attr("name"),
val = answer.attr("value");
if(answer.length === 0){
mark($(this).find("p"), "unanswered");
} else if (answers[key] !== val){
mark(answer.parent(), "incorrect"); // I changed this
line
} else {
mark(answer.parent(), "correct");
}
});
displayScore();
});
$("input[type=reset]").on("click", function(){
$("input:checked").prop("checked", false);
$('#score').empty(); //I inserted this line
clearAnswerImages();
});
var answers = {
"one": "c",
"two": "b",
"three": "a",
"four": "c",
"five": "a",
"six": "b",
"seven": "c",
"eight": "c",
"nine": "c",
"ten": "a",
};
</script>
</body>
</html>
