Does anyone know how to sum the total of the values. And I would like to multiply the total with 1072. I tried it a littlebit. But that didn't work out very well..
So I would like a javascript code where the total of the 4 values that are marked will be calculated.
<html>
<head>
<h2>Inboedelwaardemeter</h2>
<script type="text/javascript">
function sumCheckedRadioButtons() {
var sum = 0;
$('input[type=radio]:checked').each(function(i, el) {
sum += Number($(el).val());
});
return sum;
}
$('#show_sum').on('click', function() {
alert(sumCheckedRadioButtons());
});
</script>
</head>
<body>
<br>
<b> Leeftijd hoofdkostwinner:</b>
<form name="mijnForm1">
<br>
<input type="radio" id="getal1" name="leeftijd"
value="22" checked> 35 jaar en jonger
<br>
<input type="radio" id="getal2" name="leeftijd"
value="29"> 36 t/m 50 jaar
<br>
<input type="radio" id="getal3" name="leeftijd"
value="38"> 51 jaar en ouder
<br>
<br>
<b> Samenstelling huishouden:</b>
<br>
<form name="mijnForm2">
<input type="radio" id="getal4" name="huishouden"
value="22" checked> Alleenstaande
<br>
<input type="radio" id="getal5" name="huishouden"
value="29"> Echtpaar / Samenwonende
<br>
<br>
<b> Netto maandinkomen hoofdkostwinner</b>
<br>
<form name="mijnForm3">
<input type="radio" id="getal6" name="hoofdkostwinner"
value="22" checked> Tot en met €1000,-
<br>
<input type="radio" id="getal7" name="hoofdkostwinner"
value="29"> €1001,- tot en met €2000,-
<br>
<input type="radio" id="getal8" name="hoofdkostwinner"
value="38"> €2001,- tot en met €3000,-
<br>
<input type="radio" id="getal9" name="hoofdkostwinner"
value="38"> €3001,- of hoger
<br>
<br>
<b> Oppervlakte woning</b>
<br>
<form name="mijnForm4">
<input type="radio" id="getal10" name="Oppervlakte"
value="22" checked> tot en met90m²
<br>
<input type="radio" id="getal1" name="Oppervlakte"
value="29"> 91m² tot en met 140m²
<br>
<input type="radio" id="getal12" name="Oppervlakte"
value="38"> 141m² tot en met 190m²
<br>
<input type="radio" id="getal13" name="Oppervlakte"
value="38"> 191m² of meer
<br>
</form>
<input type="button" id="show_sum" value="Show Sum" />
</body>
</html>
Using jQuery you can simply select all radio buttons which are checked and add their numerical value to a sum:
function sumCheckedRadioButtons() {
var sum = 0;
$('input[type=radio]:checked').each(function(i, el) {
sum += Number($(el).val());
});
return sum;
}
Here is a working jsFiddle (press the "Show Sum" button at the bottom of the "Result" pane).
The following is a vanilla js solution:
function checkTotal() {
var a = document.querySelectorAll('input:checked');
var total = 0;
for(var x=0; x < a.length;x++){
total += a[x].value * 1;
}
alert(total);
}
Note: queryselector is available in (relatively) modern browsers only http://caniuse.com/queryselector
Example here: http://jsfiddle.net/2eU4E/1/
Related
I am working on a new security assessment webpage in which I am using HTML and Java Script. For some reason, the code is not working properly. The way the page supposed to work is by having the user answer Yes or No questions, and when the user is done they click submit. Then the page would display the number of questions answered yes, and a message if the user passed or failed the assessment. But when I click submit, I only see the result, not the message.
Any feedback would be appreciated.
function sumInputs() {
var text;
var score = document.getElementById("total").value;
if (score < 60) {
text = "You have failed the Assessment";
} else(score > 60) {
text = "You have passed the Assessment";
}
document.getElementById("demo").innerHTML = text;
}
function calcscore() {
var score = 0;
$(".calc:checked").each(function() {
score += parseInt($(this).val(), 10);
});
$("input[name=sum]").val(score)
}
$().ready(function() {
$(".calc").change(function() {
calcscore()
});
});
window.sumInputs = function() {
var inputs = $('.calc:checked'),
result = document.getElementById('total'),
sum = 0;
for (var i = 0; i < inputs.length; i++) {
sum += parseInt(inputs[i].value);
}
$('#total').val(sum);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<p id="demo"></p>
<h1>Security Assessment </h1>
<table>
<tr>
<th>PERSONNEL SECURITY</th>
</tr>
<tr>
<td>1. Does your staff wear ID badges?
<form>
Yes
<input class="calc" type="radio" name="radio1" value="1" /> No
<input class="calc" type="radio" name="radio1" value="0" /><br />
</td>
</tr>
<tr>
<td>2. Is a current picture part of the ID badge? Yes
<input class="calc" type="radio" name="radio2" value="1" /> No
<input class="calc" type="radio" name="radio2" value="0" /><br />
</td>
</tr>
<tr>
<td>3. Are authorized access levels and type (employee, contractor, visitor) identified on the Badge? Yes
<input class="calc" type="radio" name="radio3" value="1" /> No
<input class="calc" type="radio" name="radio3" value="0" /><br />
</form>
</td>
</tr>
</table>
Total : <input type="text" name="total" id="total" />
<input type="Submit" value="Submit" onclick="sumInputs()">
</body>
</html>
Check if this works. Also check your variable type
function calcscore() {
var score = 0;
$(".calc:checked").each(function() {
score += parseInt($(this).val(), 10);
});
$("input[name=sum]").val(score)
}
$().ready(function() {
$(".calc").change(function() {
calcscore()
});
});
function sumInputs() {
var inputs = $('.calc:checked'),
result = document.getElementById('total'),
sum = 0;
for (var i = 0; i < inputs.length; i++) {
sum += parseInt(inputs[i].value);
}
$('#total').val(sum);
var text, score = document.getElementById("total").value;
if (score < 60) {
text = "You have failed the Assessment";
} else if(score > 60) {
text = "You have passed the Assessment";
}
document.getElementById("demo").innerHTML = text;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<h1>Security Assessment </h1>
<table>
<tr>
<th>PERSONNEL SECURITY</th>
</tr>
<tr>
<td>1. Does your staff wear ID badges?
<form>
Yes
<input class="calc" type="radio" name="radio1" value="1" />
No
<input class="calc" type="radio" name="radio1" value="0" /><br />
</form>
</td>
</tr>
<tr>
<td>2. Is a current picture part of the ID badge?
<form>
Yes
<input class="calc" type="radio" name="radio2" value="1" />
No
<input class="calc" type="radio" name="radio2" value="0" /><br />
</form>
</td>
</tr>
<tr>
<td>3. Are authorized access levels and type (employee, contractor, visitor) identified
on the Badge?
<form>
Yes
<input class="calc" type="radio" name="radio3" value="1" />
No
<input class="calc" type="radio" name="radio3" value="0" /><br />
</form>
</td>
</tr>
</table>
Total : <input type="text" name="total" id="total"/>
<input type="Submit" value="Submit" onclick="sumInputs()">
<p id="demo"></p>
</body>
</html>
You have two functions named sumInputs; the second one (which filled the 'score' field) was overwriting the first one (which was supposed to output the message.)
Additionally the scoring was trying to be based on percentages, but never calculated a percentage, just a count of correct questions.
(There were also a couple of syntax errors here and there.)
Correcting all those by merging the two sumInputs functions results in:
function calcscore() {
var score = 0;
$(".calc:checked").each(function() {
score += parseInt($(this).val(), 10);
});
$("input[name=sum]").val(score)
}
$().ready(function() {
$(".calc").change(function() {
calcscore()
});
});
window.sumInputs = function() {
var inputs = $('.calc:checked'),
result = document.getElementById('total'),
sum = 0;
for (var i = 0; i < inputs.length; i++) {
sum += parseInt(inputs[i].value);
}
$('#total').val(sum);
var score = sum / 3 * 100; // calculate percentage
if (score < 60) {
text = "You have failed the Assessment";
} else { // no need for else if (score > 60)... which would have failed if the score was exactly 60
text = "You have passed the Assessment";
}
document.getElementById("demo").innerHTML = text;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<p id="demo"></p>
<h1>Security Assessment </h1>
<table>
<tr>
<th>PERSONNEL SECURITY</th>
</tr>
<tr>
<td>1. Does your staff wear ID badges?
<form>
Yes
<input class="calc" type="radio" name="radio1" value="1" /> No
<input class="calc" type="radio" name="radio1" value="0" /><br />
</td>
</tr>
<tr>
<td>2. Is a current picture part of the ID badge? Yes
<input class="calc" type="radio" name="radio2" value="1" /> No
<input class="calc" type="radio" name="radio2" value="0" /><br />
</td>
</tr>
<tr>
<td>3. Are authorized access levels and type (employee, contractor, visitor) identified on the Badge? Yes
<input class="calc" type="radio" name="radio3" value="1" /> No
<input class="calc" type="radio" name="radio3" value="0" /><br />
</form>
</td>
</tr>
</table>
Total : <input type="text" name="total" id="total" />
<input type="Submit" value="Submit" onclick="sumInputs()">
</body>
</html>
Incidentally, the calcscore() function is unnecessary -- it updates the displayed score while the user takes the quiz, but the sumInputs function used at the end of the quiz doesn't depend on it. If you don't want to give the user immediate feedback on whether each question was correct or not, you can remove that function (and move $("input[name=sum]").val(score) into sumInputs().
I added some already done modifications, and changed the plain javascript to jquery.
$('.calc').change(function() {
calcscore();
});
$('#submitted').click(function() {
sumInputs();
result();
});
function sumInputs() {
var inputs = $('.calc:checked'),
result = $('#total').val(),
sum = 0;
for (var i = 0; i < inputs.length; i++) {
sum += parseInt(inputs[i].value);
}
$('#total').val(sum);
}
function result() {
var text;
var score = (( $('#total').val() ) / 3 ) * 100;
var score = score.toFixed(2);
if (score < 60) {
text = "Total " + score + ": You have failed the Assessment";
}
else {
text = "Total " + score + ": You have passed the Assessment";
}
$('#demo').text(text);
}
function calcscore() {
var score = 0;
$('.calc:checked').each(function () {
score += parseInt($(this).val(), 10);
});
$('#total').val(score);
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>Security Assessment </h1>
<form>
<table>
<tr>
<th>PERSONNEL SECURITY</th>
</tr>
<tr>
<td>1. Does your staff wear ID badges?
Yes <input class="calc" type="radio" name="radio1" value="1" />
No <input class="calc" type="radio" name="radio1" value="0" /><br />
</td>
</tr>
<tr>
<td>2. Is a current picture part of the ID badge?
Yes <input class="calc" type="radio" name="radio2" value="1" />
No <input class="calc" type="radio" name="radio2" value="0" /><br />
</td>
</tr>
<tr>
<td>3. Are authorized access levels and type (employee, contractor, visitor) identified on the Badge?
Yes <input class="calc" type="radio" name="radio3" value="1" />
No <input class="calc" type="radio" name="radio3" value="0" /><br />
</td>
</tr>
</table>
</form>
Total : <input type="text" name="total" id="total" />
<input id="submitted" type="Submit" value="Submit"><br><br>
<p id="demo"></p>
</body>
</html>
I m writing a code using adobe dreamweaver. It is a price calculator that calculates the price immediately while changing radio buttons or typing number into input text. It works while the javascript code is inside of html file. But when I put the code into a sparate javascript file it doesen't work properly and when I change radio button the price doesen't change automatically and I have to type "facadeArea" and hit enter in order to see the changed "total price". please help me.
<html>
<font face="Algerian">
<h2>
What Kind of Project Would You Like to Order?
</h2>
</font>
<form name="mdl">
<div>
Project style:
</div>
<div>
   
<input type="radio" name="options" value="1"
onchange="estimateTotal(this);">modern     <input type="radio"
name="options" value="1.8" onchange="estimateTotal(this);">classic  
 
<input type="radio" name="options" value="1.6"
onchange="estimateTotal(this);">traditional    
<input type="radio" name="options" value="1.7"
onchange="estimateTotal(this);">prarmetric     <input type="radio"
name="options" value="1.3" onchange="estimateTotal(this);">organic
<input type="hidden" name="options">
</div>
<div> Project function</div>
<div>
<input type="radio" name="style" value="1"
onchange="estimateTotal(this);">villa     <input type="radio"
name="style" value="1.4" onchange="estimateTotal(this);">apartment  
  <input type="radio" name="style" value="1.5"
onchange="estimateTotal(this);">commercial
    <input type="radio" name="style" value="1.6"
onchange="estimateTotal(this);">official     <input type="radio"
name="style" value="1.3" onchange="estimateTotal(this);">other
<input type="hidden" name="style">
<br /> Facade Area <br />     <input type="text" name="area"
value="0" onchange="estimateTotal(this);">sqm
<input type="hidden" name="area">
</div>
<br />
<p>Total Price: <input type="text" name="total_price" value="0"
readonly="readonly"></p>
</form></html>
<script>
var ps = 'input[name="options"]:checked';
var pf = 'input[name="style"]:checked'
function estimateTotal(input) {
if (!document.querySelector(ps) || document.querySelector(ps).length == 0) return;
if (!document.querySelector(pf) || document.querySelector(pf) .length == 0) return;
var projectStyle = document.querySelector(pf).value;
var projectFunction = document.querySelector(ps).value;
facadeArea = Number(document.getElementsByName('area')[0].value);
var total = parseFloat(mdl.total_price.value);
if (facadeArea == 0) {
total = 0;
} else if (facadeArea > 0 && facadeArea <= 1200) {
total = parseInt(200000 + 166.7 *
facadeArea) * projectStyle * projectFunction;
} else if (facadeArea > 1200 && facadeArea <= 4000) {
total = parseInt(400000 + 35.71 *
facadeArea) * projectStyle * projectFunction;
} else if (facadeArea > 4000 && facadeArea <= 10000) {
total = parseInt(500000 + 16.66 *
facadeArea) * projectStyle * projectFunction;
} else {
total = 700000;
}
mdl.total_price.value = total;
}
</script>
Im trying to unhide div id=Q3 with my first 2 radio inputs (id= Q1 & id = Q2)
if (Q1 = Ja and Q2 = Ja) show Q3.
Can somebody please help me!
See my html code below (sorry for the bad coding im a totally noob!).
HTML
<body>
<header>
<h2>Helpdesk</h2>
<div>Wat is u probleem?</div>
</header>
<form>
<h4>Kunt computer normaal aanzetten?<span class = "req" id= "req_Q1">*</span></h4>
<input type="radio" name="A1" id="A1" value ="Ja" /> : Ja<br />
<input type="radio" name="A1" id="A2" value ="Nee" /> : Nee<br />
<p class= "instruct" id="instruct_Q1">
<small>Controleer eerst de kabels!</small>
</p>
<h4 id= "Q2">Geeft de monitor normaal beeld?<span class = "req" id= "req_Q2">*</span> </h4>
<input type="radio" name="A2" id="A3" /> : Ja<br />
<input type="radio" name="A2" id="A4"/> : Nee<br />
<p class= "instruct" id="instruct_Q2">
<small>Controleer eerst de kabels!</small>
</p>
</div>
<div id= "Q3" style="display: none;">
<label for ="Q3.1" ><h4>Start windows normaal op?</h4></label>
<select name="Q3.1">
<option value="A3.1" >Ja, geen probleem</option>
<option value="A3.2" >Ja, maar met foutmelding</option>
<option value="A3.3" >Nee, zwart scherm</option>
<option value="A3.4" >Nee, blauw scherm</option>
</select>
</div>
<div style="display: none;">
<h4>Kunt u inloggen?</h4>
<input type="radio" name="Q4" />Ja, geen probleem<br />
<input type="radio" name="Q4" /> Nee, ik krijg een foutmelding<br />
</div>
<div style="display: none;">
<h4>Ik krijg de volgende foutmelding <span class = "req" id= "req_Q5">*</span></h4>
<input type="radio" name="Q5" />Kan u niet aanmelden bij het domein. Controleer of uw gebruikersnaam en/of toegangscode correct zijn.<br />
<input type="radio" name="Q5" />Kan u niet aanmelden omdat het domein niet beschikbaar is. <br />
<input type="radio" name="Q5" />Uw account is geblokkeerd. Neem contact op met de beheerder. <br />
</div>
Javascript
$("input[name=A1]").click(function()
{
if(this.id =="A1"){
$("#Q3").show('slow');
}
else {
$("#Q3").hide('slow');
}
});
You can use a ternary instead of an if statement to make a little more elegant
/* get the status of the answers */
var status = $("#A1").is(':checked') && $("#A3").is(':checked');
/* let the status decide which $ method to use */
$("#Q3")[status ? 'fadeIn' : 'fadeOut'](500);
$("#helpdesk :input").change(function() {
var status = $("#A1").is(':checked') && $("#A3").is(':checked');
$("#Q3")[status ? 'fadeIn' : 'fadeOut'](500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h2>Helpdesk</h2>
<div>Wat is u probleem?</div>
</header>
<form id="helpdesk">
<h4>Kunt computer normaal aanzetten?<span class="req" id="req_Q1">*</span></h4>
<input type="radio" name="A1" id="A1" value="Ja" /> : Ja<br />
<input type="radio" name="A1" id="A2" value="Nee" /> : Nee<br />
<p class="instruct" id="instruct_Q1">
<small>Controleer eerst de kabels!</small>
</p>
<h4 id="Q2">Geeft de monitor normaal beeld?<span class="req" id="req_Q2">*</span> </h4>
<input type="radio" name="A2" id="A3" /> : Ja<br />
<input type="radio" name="A2" id="A4" /> : Nee<br />
<p class="instruct" id="instruct_Q2">
<small>Controleer eerst de kabels!</small>
</p>
<div id="Q3" style="display: none;">
<label for="Q3.1"><h4>Start windows normaal op?</h4></label>
<select name="Q3.1">
<option value="A3.1" >Ja, geen probleem</option>
<option value="A3.2" >Ja, maar met foutmelding</option>
<option value="A3.3" >Nee, zwart scherm</option>
<option value="A3.4" >Nee, blauw scherm</option>
</select>
</div>
<div style="display: none;">
<h4>Kunt u inloggen?</h4>
<input type="radio" name="Q4" />Ja, geen probleem<br />
<input type="radio" name="Q4" /> Nee, ik krijg een foutmelding<br />
</div>
<div style="display: none;">
<h4>Ik krijg de volgende foutmelding <span class="req" id="req_Q5">*</span></h4>
<input type="radio" name="Q5" />Kan u niet aanmelden bij het domein. Controleer of uw gebruikersnaam en/of toegangscode correct zijn.<br />
<input type="radio" name="Q5" />Kan u niet aanmelden omdat het domein niet beschikbaar is. <br />
<input type="radio" name="Q5" />Uw account is geblokkeerd. Neem contact op met de beheerder. <br />
</div>
Look at this fiddle, and let me know, if it is the desired result :-) https://jsfiddle.net/7LL98L24/
$("#helpdesk :input").change(function() {
if($("#A1").is(':checked') && $("#A3").is(':checked')) {
$("#Q3").fadeIn(500);
} else {
$("#Q3").fadeOut(500);
}
});
Please notice, that I added an ID to your form Element to use the .change Method of jQuery
First of all to hide / unhide elements you should use the CSS.
There was question about it on StackOverflow: JavaScript: How to Hide / Unhide <div>
However to my current knowledge to make IF statment - like you mentioned:
if(Q1 == Ja && Q2 == Ja){ show Q3 }
You need to use JavaScript.
EDIT: Hide/unhide div with button?
I think there can be answer for your question: hide / unhide using JQuery - I found it preety quickly when asked google.
The issue is:
I have four radio buttons and a check box.
Two radio buttons are with one name and two with another.
The last radio buttons with same name appear only when the check box is checked.
What I want is add the value of first radio button and the value of radio button that appears after the checkbox is checked.
So how do I total the two values using javascript or any other technique. I need it asap as I am working on a project. I need that to be done as in a shopping cart. It means if the user selects another radio button then the value of earlier one should be subtracted and the value of new one added.
<script>
// get list of radio buttons with name 'size'
var sz = document.forms['de'].elements['type'];
// loop through list
for (var i=0, len=sz.length; i<len; i++) {
sz[i].onclick = function() { // assign onclick handler function to each
// put clicked radio button's value in total field
var m=this.form.elements.total.value = this.value;
};
}
var sa = document.forms['de'].elements['glass'];
// loop through list
for (var i=0, len=sa.length; i<len; i++) {
sa[i].onclick = function() { // assign onclick handler function to each
// put clicked radio button's value in total field
var n=this.form.elements.total1.value = this.value;
};
}
$(document).ready(function () {
$('.a').hide();
$('#checkb').click(function () {
var $this = $(this);
if ($this.is(':checked')) {
$('.a').show();
} else {
$('.a').hide();
}
});
});
</script>
<form action="sum.php" method="post" name="de">
<fieldset>
<table align="center">
<tr><td align="center" colspan="100sp"><label><input type="radio" name="type" value="200" />Ordinary (Rs. 200)</label>
<tr><td align="center" colspan="100sp"><label><input type="radio" name="type" value="500" />Original (Rs. 500)</label>
<tr><td colspan="100sp"><label>Do You want a screen guard or a tempered glass?</label><input type="checkbox" name="screen" value="yes" id="checkb" />
<tr><td align="center" colspan="100sp"><label class="a"><input type="radio" class="a" name="glass" value="100" />Screen Guard (Rs. 100)</label>
<tr><td align="center" colspan="100sp"><label class="a"><input type="radio" class="a" name="glass" value="200" />Tempered Glass (Rs. 200)</label>
</table>
<p><label>Repair: Rs. <input type="text" name="total" value="0" readonly="readonly" /></label></p>
<p><label>Glass: Rs. <input type="text" name="total1" value="0" readonly="readonly" /></label></p>
<p><label>Total: Rs. <input type="text" name="total2" value="0" readonly="readonly" /></label></p>
</fieldset>
</form>
You can do this with the Jquery event Change(). I have added ID names to the input text elements and this Jquery lines:
Check the comments for each line.
$(document).ready(function() {
//HIDE AND SHOW EXTRA OPTIONS
$('.a').hide();
$('#checkb').change(function() {
$('.a').toggle();
});
//CHECK WHEN ANY RADIO INPUT CHANGES
$('fieldset').on('change','input[type=radio]',function(){
//Get the Value and wich field text will change
var value = $(this).attr('value'),
target = $(this).attr('name');
$('#'+target).val(value);
//Show the total
var total = parseInt($('#type').val(),10) + parseInt($('#glass').val(),10);
$('#total').val(total);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<label>
<input type="radio" name="type" value="200" />Ordinary (Rs. 200)</label>
<br>
<label>
<input type="radio" name="type" value="500" />Original (Rs. 500)</label>
<br>
<input type="checkbox" name="screen" value="yes" id="checkb" />
<label>Do You want a screen guard or a tempered glass?</label>
<br>
<label class="a">
<input type="radio" class="a" name="glass" value="100" />Screen Guard (Rs. 100)</label>
<br>
<label class="a">
<input type="radio" class="a" name="glass" value="200" />Tempered Glass (Rs. 200)</label>
<br>
<p>
<label>Repair: Rs.
<input type="text" id="type" name="total" value="0" readonly="readonly" />
</label>
</p>
<p>
<label>Glass: Rs.
<input type="text" id="glass" name="total1" value="0" readonly="readonly" />
</label>
</p>
<p>
<label>Total: Rs.
<input type="text" id="total" name="total2" value="0" readonly="readonly" />
</label>
</p>
</fieldset>
</form>
You can do it by using a facility given by jquery. Please check the below code
<input type="radio" class="myradio" name="radio" id="r1" data-value="test1"/>
<input type="radio" class="myradio" name="radio" id="r1" data-value="test1"/>
<script type="text/javascript">
var total = 0;
$('.myradio').on('click',function(){
//Here you can get the checkbox value from data-value attribute
alert($(this).data('value');
//Total the Values
total = total + $(this).data('value');
});
</script>
In above code you can easily get the data from checkbox when it is clicked...
This is my Code for my Quiz.
I tried to change it somehow but it still doesnt let me choose more than one option.
Do i need an extra Code or do i have to change the whole thing? Also if anyone can see any errors, please say so.
Thank You in Advance :)
<html>
<head>
<title>Knowledge Test</title>
<link rel="stylesheet" href="style folder/styles.css" type="text/css" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<script type="text/javascript">
var numQuest=8
var ie=document.all
function showAnswer(el,ans){
ie? ie[el].innerHTML='The answer is: '+ ans : document.getElementById(el).innerHTML='The answer is: '+ ans
}
function addup() {
var q, right, statement, total=0
questions=new Array();
for (i = 0; i < numQuest; i++)
questions[i]=0
if (document.forms.quiz.q1['right1']){
for (i = 0; i < numQuest; i++){
q="q"+(i+1)
right="right"+(i+1)
if (document.forms.quiz[q][right].checked)
questions[i]=1
}
}
else if (document.getElementById){
for (i = 0; i < numQuest; i++){
right="right"+(i+1)
if (document.getElementById(right).checked)
questions[i]=1
}
}
else
return;
for (i = 0; i < numQuest; i++)
total += questions[i]
/*///////////Set score /////////////*/
statement='You scored '+ total +' out of '+ numQuest +' correct, '+ Math.round(total/numQuest*100) +'%'
ie? ie.results.innerHTML=statement : document.getElementById('results').innerHTML=statement
}
function clearR(){
ie? ie.results.innerHTML='' : document.getElementById('results').innerHTML=''
for (i = 0; i < numQuest; i++)
ie? ie["ans"+(i+1)].innerHTML='' : document.getElementById("ans"+(i+1)).innerHTML=''
}
</script>
</head>
<body>
<div id="container">
<header>
<div class="width">
<h1>Quiz</h1>
<nav>
<ul>
<li>Home</li>
<li>Accessibility</li>
<li>Usability</li>
<li>Additional Information</li>
<li>How I built this Website</li>
<li>Quiz</li>
</ul>
</nav>
</div>
</header>
<div id="body" class="width">
<center><h1>Test your Knowledge</h1></center>
<hr>
<form name="quiz">
Question 1:<br>
Which HTML attribute is used to define an inline style sheet?<br>
<input id="w1a" type="radio" unchecked name="q1"><label for="w1a">class</label><br>
<input id="right1" type="radio" unchecked name="q1"><label for="right1">style</label><br>
<input id="w1b" type="radio" unchecked name="q1"><label for="w1b">in-style</label><br>
<input id="w1c" type="radio" unchecked name="q1"><label for="w1c">font</label><br>
<input class="chkans" type="button" value="Check Answer" onclick="showAnswer('ans1','style')"> <span id="ans1" class="chkans"></span>
<br> <br>
Question 2:<br>
What is the correct CSS syntax for making all the <"p"> elements bold?<br>
<input id="w2a" type="radio" unchecked name="q2"><label for="w2a">p style="text-size:bold"</label><br>
<input id="w2b" type="radio" unchecked name="q2"><label for="w2b">p {text-size:bold}</label><br>
<input id="right2" type="radio" unchecked name="q2"><label for="right2">p{font-weight:bold}</label><br>
<input id="w2c" type="radio" unchecked name="q2"><label for="w2c">p style="font-size:bold"</label><br>
<input class="chkans" type="button" value="Check Answer" onclick="showAnswer('ans2','p{font-weight:bold}')"> <span id="ans2" class="chkans"></span>
<br> <br>
Question 3:<br>
What does HTML stand for?<br>
<input id="w3a" type="radio" unchecked name="q3"><label for="w3a">Hyperlinks and Text Markup Language</label><br>
<input id="w3b" type="radio" unchecked name="q3"><label for="w3b">Home Tool Markup Language</label><br>
<input id="right3" type="radio" unchecked name="q3"><label for="right3">Hyper Text Markup Laguage</label><br>
<input id="w3c" type="radio" unchecked name="q3"><label for="w3c">High Technic Markup Language</label><br>
<input class="chkans" type="button" value="Check Answer" onclick="showAnswer('ans3','Hyper Text Markup Laguage')"> <span id="ans3" class="chkans"></span>
<br> <br>
Question 4:<br>
What does CSS stand for?<br>
<input id="right4" type="radio" unchecked name="q4"><label for="right4">Cascading Style Sheets</label><br>
<input id="w4a" type="radio" unchecked name="q4"><label for="w4a">Creative Style Sheets</label><br>
<input id="w4b" type="radio" unchecked name="q4"><label for="w4b">Computer Style Sheets</label><br>
<input id="w4c" type="radio" unchecked name="q4"><label for="w4c">Colorful Style Sheets</label><br>
<input class="chkans" type="button" value="Check Answer" onclick="showAnswer('ans4','Cascading Style Sheets')"> <span id="ans4" class="chkans"></span>
<br> <br>
Question 5:<br>
Choose the right text color for a Website with a white background.<br>
<input id="right5" type="radio" unchecked name="q5"><label for="right5">black</label><br>
<input id="w5a" type="radio" unchecked name="q5"><label for="w5a">orange</label><br>
<input id="w5b" type="radio" unchecked name="q5"><label for="w5b">red</label><br>
<input id="w5c" type="radio" unchecked name="q5"><label for="w5c">yellow</label><br>
<input class="chkans" type="button" value="Check Answer" onclick="showAnswer('ans5','black')"> <span id="ans5" class="chkans"></span>
<br> <br>
Question 6:<br>
Where in an HTML document is the correct place to refer to an external style sheet?<br>
<input id="w6a" type="radio" unchecked name="q6"><label for="w6a">In the <"head"> section</label><br>
<input id="w6b" type="radio" unchecked name="q6"><label for="w6b">At the end of the document</label><br>
<input id="right6" type="radio" unchecked name="q6"><label for="right6">At the top of the document</label><br>
<input id="w6c" type="radio" unchecked name="q6"><label for="w6c">In the <"body"> section</label><br>
<input class="chkans" type="button" value="Check Answer" onclick="showAnswer('ans6','black')"> <span id="ans6" class="chkans"></span>
<br> <br>
Question 7:<br>
Which property is used to change the background color?<br>
<input id="w7a" type="radio" unchecked name="q7"><label for="w7a">color</label><br>
<input id="right7" type="radio" unchecked name="q7"><label for="right7">background-color</label><br>
<input id="w7b" type="radio" unchecked name="q7"><label for="w7b">bgcolor</label><br>
<input id="w7c" type="radio" unchecked name="q7"><label for="w7c">bgc</label><br>
<input class="chkans" type="button" value="Check Answer" onclick="showAnswer('ans7','black')"> <span id="ans7" class="chkans"></span>
<br> <br>
Question 8:<br>
On a web page, how and where should be the logo/brand name?(choose 2)<br>
<input id="right8" type="radio" unchecked name="q8"><label for="right8">easy</label><br>
<input id="right8" type="radio" unchecked name="q8"><label for="right8">upper-left corner of the screen</label><br>
<input id="w8a" type="radio" unchecked name="q8"><label for="w8a">in the middle of the screen</label><br>
<input id="w8b" type="radio" unchecked name="q8"><label for="w8b">hard</label><br>
<input class="chkans" type="button" value="Check Answer" onclick="showAnswer('ans8','easy','upper-left corner of the screen')"> <span id="ans8" class="chkans"></span>
<br> <br>
<!--End of Questions-->
<hr><br>
<input type="button" value="See Score" onclick="addup()"> <span id="results"></span><br> <br>
<input type="button" value="Start Again" onclick="reset();clearR()">
</form>
</div>
</div>
</body>
</html>
Use <input type="checkbox"> instead of <input type="radio">.
input type="radio" represents a selection of one item from a list of items
input type="checkbox" represents a state or option that can be toggled