Hi, I’d like to clear fields to default using the reset button, without having to refresh the whole page.
Pullo already showed me this way of clearing the fields in the below code.
<script>
/*global $:false */
function clearAnswerImages(){
$("img").remove();
}
function mark(el, status){
var images = {
correct: "http://www.littletherese.com/tick.jpg",
incorrect: "http://www.littletherese.com/x.jpg",
unanswered: "",
},
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": "b",
"two": "c",
"three": "a",
"four": "c",
"five": "b",
"six": "c",
"seven": "a",
"eight": "a",
"nine": "b",
"ten": "c",
};
</script>
But, try as I might, I haven’t managed to adapt this code, starting:
$("input[type=reset]").on("click", function()..
for another page using dropdown menus:
The page I would like to change is this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Quiz with radio buttons</title>
<style>
label{ display: block; }
input[type=submit]{ margin-top: 15px; }
</style>
</head>
<body>
<form>
<div class="question">
<p><strong>Q1</strong>: Mary is English. She was born in London</p>
<label><input type="radio" name="one" value="a">Mary was born in England</label>
<label><input type="radio" name="one" value="b">Mary, who is English, was born in London</label>
<label><input type="radio" name="one" value="c">English Mary was born in London</label>
<label><input type="radio" name="one" value="d">London Mary is English born</label>
</div>
<div class="question">
<p><strong>Q2</strong>: Mary is English. She was born in London</p>
<label><input type="radio" name="two" value="a">Mary was born in England</label>
<label><input type="radio" name="two" value="b">Mary, who is English, was born in London</label>
<label><input type="radio" name="two" value="c">English Mary was born in London</label>
<label><input type="radio" name="two" value="d">London Mary is English born</label>
</div>
<input type="submit" />
<input type="reset" onClick="window.location.reload()" value="Start again" />
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function clearAnswers(){
$("img").each(function(){
$(this).remove();
})
}
function markIncorrect(el){
var img = new Image();
img.src = 'http://www.littletherese.com/x.jpg';
el.append(img);
}
function markCorrect(el){
var img = new Image();
img.src = 'http://www.littletherese.com/tick.jpg';
el.append(img);
}
function markQ(el){
var img = new Image(); // Finally I decided to omit the image "Q.jpg"
img.src = '';
el.append(img);
}
$("form").on("submit", function(e){
e.preventDefault();
clearAnswers();
$questions = $(".question");
$questions.each(function(){
var answer = $(this).find("input:checked"),
key = answer.attr("name"),
val = answer.attr("value");
if(answer.length === 0){
markQ($(this).find("p"));
} else if (answers[key] !== val){
markIncorrect(answer.parent()); // I changed this line
} else {
markCorrect(answer.parent());
}
});
});
var answers = {
"one": "b",
"two": "b"
}
$("input[type=reset]").on("click", function(){
window.location.reload()
}
</script>
</body>
</html>
Thanks for any help.
