I built the following quiz in which you can choose of two answers. The right answer shows a V and the wrong answer shows an X. Till here all is fine, but I’m looking for a way that each answer will give 10 points and the total score will be shown right to “End score” in the end of the quiz. I am stuck on the part of making the function that will take +10 points from each V and -10points from each X. Please help,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10 questions quiz and more</title>
<style>
#formbg{background: lightgrey;}
.o1{background: green;}
.o2{background: red;}
</style>
</head>
<body>
<h1>Hello Itamar, this is the quiz</h1>
<form id="formbg">
<label>Q1 - Love Chocolate?</label>
<input type="radio" name="choose" onclick="trueAns()" class="o1">Yes
<input type="radio" name="choose" onclick="falseAns()" class="o2">No
<label>| Answer: <span id="test"><!-- The span will hold the answer after the function got it's Id. --></span></label>
<label for="formbg">Q2 - Love Linux?</label>
<input type="radio" name="choose" onclick="trueAns()" class="o1">Yes
<input type="radio" name="choose" onclick="falseAns()" class="o2">No
<label>| Answer: <span id="test"><!-- The span will hold the answer after the function got it's Id. --></span></label>
<p id="score" onclick="totalSum">| End score: </p>
</form>
<script>
var points = 10;
function trueAns() {
document.querySelector("#test").innerHTML = "V";
}
function falseAns() {
document.querySelector("#test").innerHTML = "X";
}
function totalSum() {
document.querySelector("#score")
return points
}
</script>
</body>
</html>
Set variables for your radio buttons…you can use a selector for names or assign ids to each of em (I think ID selector works for name anyway) , attach the “.checked” method at the end of each of them, then use an IF statement to check the variables and add points accordingly…it’s all about function placement and how you call it though. You can use your points variable to hold points and to add them do a " +=" operator.
You can simplify the script by having a single function that handles both true and false answers.
You also need to give the two sections of this quiz different radio names. At the moment they are all “choose”. This means that clicking any of the four buttons will change the selection. In a following script I have used “choose1” and “choose2” instead.
The scores for each question can be stored in a hidden input element for each question. This allows you to change a selection and then sum the hidden values to give you a total score.
For the example I have made the hidden inputs type=“text” so that you can see the intermediate scores as you select different buttons. If you use this method, you will need to change the type=“text” to type=“hidden” for each question.
The script is shown below.
function Ans(TF,numbr)
{ var result=(TF===true)? {symbol:"V",add:1} : {symbol:"X", add:-1};
document.getElementById("test"+numbr).innerHTML = result.symbol;
document.getElementById("t"+numbr).value=result.add;
var totScore=Number(t1_Obj.value)+Number(t2_Obj.value);
document.getElementById("scoreNum").innerHTML= " "+totScore;
}
// -------------
var t1_Obj= document.getElementById("t1");
var t2_Obj= document.getElementById("t2");