I want to create a multiple choice quiz. The questions are on different pages. Each right answer is worth 1 point. I need my js code to keep counting the points when going from one page to another.
Here is my code:
page1.html
<html>
<head>
</head>
<body>
<b>5+5=</b> <br><br>
<form action="" id="questionform">
<input type="radio" name="answer" value="A" onclick="right()"><span>5</span><br>
<input type="radio" name="answer" value="B" onclick="right()" id="rightanswer"><span>10</span><br>
<input type="radio" name="answer" value="C" onclick="right()"><span>15</span><br>
<input type="radio" name="answer" value="D" onclick="right()"><span>20</span><br>
</form>
<input type="submit" value="⬅ Back" id="back" form="questionform" disabled>
<input type="submit" value="Next ➡" id="next" form="questionform" formaction="page2.html">
<script src="scorecode.js"></script>
</body>
</html>
page2.html
<html>
<head>
</head>
<body>
<b>5+20=</b> <br><br>
<form action="" id="questionform">
<input type="radio" name="answer" value="A" onclick="right()"><span>10</span><br>
<input type="radio" name="answer" value="B" onclick="right()"><span>15</span><br>
<input type="radio" name="answer" value="C" onclick="right()"><span>20</span><br>
<input type="radio" name="answer" value="D" onclick="right()" id="rightanswer"><span>25</span><br>
</form>
<input type="submit" value="⬅ Back" id="back" form="questionform" onclick="window.history.go(-1); return false;">
<input type="submit" value="Next ➡" id="next" form="questionform" disabled>
<script src="scorecode.js"></script>
</body>
</html>
scorecode.js
function right() {
var total = 0;
if (document.getElementById("rightanswer").checked) {
total += 1;
console.log(total);
}
}
document.addEventListener("DOMContentLoaded", function () {
right();
});
I also have a problem with the button next. When I click on the button back then on the button next my checked answer disappears. How can I fix it?
You can use localstorage to store that info.
https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage
To set the item use
localStorage.setItem('score', '1');
To get the item on the other page use
var cat = localStorage.getItem('score');
Related
This piece of code is meant to call a function, named "check()" and return a value depending if certain radio buttons are checked, in the span element with id "ans".
<head>
<script>
var check = 0
function check() { // Where the function is set
if (document.getElementById("hig").checked) {
check+=1
}
if (document.getElementById("med").checked) {
check+=1
}
if (document.getElementById("low").checked) {
check+=1
}
document.getElementById("ans").textContent="You got " + check + "/3"
}
</script>
</head>
<body>
<center>
<h2>What radiation does:</h2>
<h3>Penetrating Power:</h3>
Alpha Radiation: <span id="a"></span> <br>
<input type="radio" name="a" id="hig">
<input type="radio" name="a" id="med">
<input type="radio" name="a" id="low"> <br>
Beta Radiation: <br>
<input type="radio" name="b" id="hig">
<input type="radio" name="b" id="med">
<input type="radio" name="b" id="low"> <br>
Gamma Radiation: <br>
<input type="radio" name="g" id="hig">
<input type="radio" name="g" id="med">
<input type="radio" name="g" id="low"> <br>
High/Medium/Low <br>
<button onclick="check()">Check</button> <!--Where the function is called-->
<span id="ans"></span>
</center>
</body>
However, when "check()" is called, it returns the error code: "Uncaught TypeError: check is not a function".
It doesn't seem to be a typo, as what I can see so far.
Any ideas?
Your function name is the same name as the variable, just pick a new name for the function
[2]. So far I have written the following code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check Box using jQuery</title>
</head>
<body>
<form id="form">
<input type="checkbox" id="red" name="red" value="Red"/>Red
<input type="checkbox" id="green" name="green" value="Green"/>Green
<input type="checkbox" id="blue" name="blue" value=" Blue"/>Blue
<input type="checkbox" id="black" name="black" value="Black"/>Black<br/>
</form>
<div id="result">0 boxes are checked</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="chkbox.js"></script>
</body>
</html>
And now the script which I have written in the chkbox.js file is:-
$(document).ready(function(){
var $checkboxes=$('#form td input[type="checkbox"]');
$checkboxes.change(function(){
var ccc=$checkboxes.filter(':checked').length;
$('span').text(ccc);
});
});
I unable to figure out why this code is not working.
First, you do not have td element inside the #form element, 2nd you're printing inside a generic span that doesn't exist. You could do something like this:
<form id="form">
<input type="checkbox" id="red" name="red" value="Red" /> Red
<input type="checkbox" id="green" name="green" value="Green" /> Green
<input type="checkbox" id="blue" name="blue" value=" Blue" /> Blue
<input type="checkbox" id="black" name="black" value="Black" /> Black
</form>
<div id="result">No boxes are checked</div>
And for your javascript like this:
$(document).ready(function() {
var $checkboxes = $('#form input[type="checkbox"]');
$checkboxes.change(function() {
var nr = $('#form input:checked').length;
var message = (nr === 0)?'No':nr;
message += (nr === 1)?" box is checked":" boxes are checked";
$('#result').text(message);
});
});
But, in general, study more about jquery, javascript and html.
You don't have any tds or spans in your code , check this simple way
$('#form input.checkbox').click(function(){
$('#result').text($('#form input.checkbox:checked').length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<input type="checkbox" class="checkbox" id="red" name="red" value="Red"/>Red
<input type="checkbox" class="checkbox" id="green" name="green" value="Green"/>Green
<input type="checkbox" class="checkbox" id="blue" name="blue" value=" Blue"/>Blue
<input type="checkbox" class="checkbox" id="black" name="black" value="Black"/>Black<br/>
</form>
<div><strong id="result">0</strong> boxes are checked</div>
Is there any possible way to get an input radio value information (externaly), from a class?
I did a million attempts...
Here is the code im stucked to:
Parent.htm
<html>
<head>
<title></title>
</head>
<body>
<input type="text" id="txtName" readonly="readonly" />
<input type="button" value="Select Name" onclick="SelectName()" />
<script type="text/javascript">
var popup;
function SelectName() {
popup = window.open("Popup.htm", "Popup", "width=300,height=100");
popup.focus();
return false
}
</script>
</body>
</html>
And here is the page that i can't define to get the information that are on value.
Popup.htm
<html>
<body>
<form class="ddlNames">
<input type="radio" name="ddlNames" id="num" value="one">
<input type="radio" name="ddlNames" id="num" value="two">
<input type="radio" name="ddlNames" id="num" value="three">
</form>
<br />
<br />
<input type="button" value="Select" onclick="SetName();" />
<script type="text/javascript">
function SetName() {
if (window.opener != null && !window.opener.closed) {
var txtName = window.opener.document.getElementById("txtName");
txtName.value = document.getElementsByClassName("ddlNames")[0].value;
}
window.close();
}
</script>
</body>
</html>
I tried this way too:
<input type="radio" class="ddlNames" name="ddlNames" id="num" value="one">
<input type="radio" class="ddlNames" name="ddlNames" id="num" value="two">
<input type="radio" class="ddlNames" name="ddlNames" id="num" value="three">
To give each one the ddlNames class, but it's not working?
You can get the checked value using a query-selector
document.querySelector('input[name="ddlNames"]:checked').value;
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width , initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/Quiz.css">
<script>
var xmlh,url;
xmlh = new XMLHttpRequest();
url="AnswerFile.txt";
xmlh.onreadystatechange=function(){
if(xmlh.readyState == 4 && xmlh.status ==200){
var myArr =JSON.parse(xmlh.responseText);
myFunctuion(myArr);
}
};
xmlh.open("GET",url,true);
xmlh.send();
function myFunctuion(arr){
var dom=document.getElementById("demo");
var cha=document.getElementById("radio1");
var chb=document.getElementById("radio2");
var chc=document.getElementById("radio3");
dom.innerHTML = "<h3>" +arr[0].question+ "</h3>";
cha.innerHTML = arr[0].ChA ;
chb.innerHTML = arr[0].ChB ;
chc.innerHTML = arr[0].ChC ;
}
</script>
<head>
<html>
<body>
<div class="w3-content" >
<form class="w3-container w3-card-4 w3-label">
<label id="demo"></label>
<input class="w3-radio" type="radio" name="ChA" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="ChB" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="ChC" value="c"> <label id="radio3"></label></input></br>
<br>
<br>
<input class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey w3-center w3-section w3-border w3-round-xlarge " style="font-weight:900;" type="submit" value="Submit Answers">
</form>
</div>
</body>
</html>
i get my all question and option from text file by JSON and i succeeded it .
But my main problem is all my radio button is checked where i want to if one button is checked then other button is unchecked .
what my problem in code ? what i do? and why cause this problem ?
?** for style i use W3.CSS **?
Your HTML input radio should have the same name attribute, like this:
<input class="w3-radio" type="radio" name="Ch" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="Ch" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="Ch" value="c"> <label id="radio3"></label></input></br>
Your radio buttons should all use the same name :)
<input class="w3-radio" type="radio" name="Ch" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="Ch" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="Ch" value="c"> <label id="radio3"></label></input></br>
Name of your radio input fields should be same for specific question's options. Like below:
First group of radios
<input type="radio" name="rad" value="radopt1" id="radopt1"><label for="radopt1">Radio Option1</label></input>
<input type="radio" name="rad" value="radopt2" id="radopt2"><label for="radopt2">Radio Option2</label> </input>
<input type="radio" name="rad" value="radopt3" id="radopt3"><label for="radopt3">Radio Option3</label></input>
Second group of radios
<input type="radio" name="rad1" value="rad1opt1" id="rad1opt1"><label for="rad1opt1">Radio1 Option1</label></input>
<input type="radio" name="rad1" value="rad1opt2" id="rad1opt2"><label for="rad1opt2">Radio1 Option2</label> </input>
<input type="radio" name="rad1" value="rad1opt3" id="rad1opt3"><label for="rad1opt3">Radio1 Option3</label></input>
So here's what my code does:
it displays 10 sets of radio buttons, each with 2 options. (so 20 radio buttons total). The 10 sets all have different names, but are within the same form. A person can only choose 5 buttons out of the 10. I have a piece of code that disables the radio buttons once 5 are selected. Now I want to prevent people from submitting the form if 4 or less buttons are selected.
Here is an example of the code:
HTML:
<form method="post" action="index.php" name="buttons" onsubmit="return Validation()">
<input type="radio" id="button" value="first_button" name="1" />
<input type="radio" id="button" value="second_button" name="1" />
<input type="radio" id="button" value="first_button" name="2" />
<input type="radio" id="button" value="second_button" name="2" />
<input type="radio" id="button" value="first_button" name="3" />
<input type="radio" id="button" value="second_button" name="3" />
<input type="radio" id="button" value="first_button" name="4" />
<input type="radio" id="button" value="second_button" name="4" />
<input type="radio" id="button" value="first_button" name="5" />
<input type="radio" id="button" value="second_button" name="5" />
<input type="radio" id="button" value="first_button" name="6" />
<input type="radio" id="button" value="second_button" name="6" />
<input type="radio" id="button" value="first_button" name="7" />
<input type="radio" id="button" value="second_button" name="7" />
<input type="radio" id="button" value="first_button" name="8" />
<input type="radio" id="button" value="second_button" name="9" />
<input type="radio" id="button" value="first_button" name="9" />
<input type="radio" id="button" value="second_button" name="9" />
<input type="radio" id="button" value="first_button" name="10" />
<input type="radio" id="button" value="second_button" name="10" />
</form>
JAVASCRIPT
function Validation()
{
var bol2 = $("input:radio:checked").length;
if (bol2<=4)
{
alert("Please select 5 buttons");
return false;
}
}
The code now works. Thanks #Climbage, I looked at other code and figured out what to do
Try this - http://jsfiddle.net/BeT4h/
<form method="post" action="index.php" name="buttons" id="form">
<script>
function showTime() {
var inputs = document.getElementById("form").elements;
var count = 0;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'radio' && inputs[i].checked) {
count++;
}
}
alert(count);
}
</script>
Just make 5 of them checked by default.
Put check='checked' for every other input. Put in all first_button or second_button.