Develop Reference

JavaScript Checklist Quiz Result

(Sorry still learning javascript) I was looking to make a checklist quiz which gives different results based on how many checkboxes the user checked off. In this case I have 7 checkboxes, and if the user checks off 1 or less they get the zeroToOne response, while if the user checks off 2-7 check boxes they will get the twotoSeven response.
I keep getting the zerotoOne response no matter how many I checkoff, I believe the result is always 1 for some reason. If someone could please help me come up with a solution here, I'd like to add more results and checkbox statements, up to 25. I also believe I wont actually need an array since I am just using a 1 point value as well.
const numericalValues = new Array();
numericalValues["point"]= 1;
function getScore(){
const form = document.forms["form"];
const quest = form.elements["quiz"];
for(i=0; i<quest.length; i++)
{
if(quest[i].checked)
{
score = numericalValues[quest[i].value];
break;
}
}
return score;
};
function getTotal()
{
const totalScore = getScore();
document.getElementById('result').innerHTML =
//"Your total score is: "+totalScore;
getComment(totalScore);
}
const zerotoOne = 'It is amazing that you already know all of these things about yourself and didnt need to take the quiz. Maybe you just wanted to see all of the possible result responses? Well played!';
const twotoSeven = 'I see that among your many talents and attributes, humility is still part of your charm!';
function getComment(score)
{
if (score <=1)
return zerotoOne;
else if (score >=2 && score <= 7)
return twotoSeven;
}
document.getElementById('submit').onclick=getTotal;
.quiz-form {
margin-left:auto !important;
margin-right:auto !important;
max-width:700px;
}
#form {
text-align:left;
}
<div class = "quiz-form">
<form id="form" name="form">
<fieldset id="controls">
<p>
<label> I enjoy reading for fun.
<input type="checkbox" name="quiz" id="quiz" value="point" />
</label>
</br>
<label> I like to write.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</br>
<label> I enjoy other forms of self-expression, such as music and art.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</br>
<label> I find discussing ideas with other people exciting.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</br>
<label> I enjoy thinking through complex challenges.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</br>
<label> I am curious about the world.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</br>
<label> I am interested in a wide range of subjects.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</p>
<p>
<input type="button" name="submit" id="submit" value="Submit" />
</p>
<p id="result"></p>
</fieldset>
</form>

First, two housekeeping items:
</br> is not a valid HTML tag. You can use <br> or <br/>.
The id attribute must be unique, you can't have multiple elements with the same id.
Second -- there are a number of issues here. The most immediate, obvious cause of your problem is the break statement in getScore. This will stop the for loop as soon as it finds the first checked element and return 1.
The deeper issue here, even if this is removed, is that you're always returning 1 even without the break, because you're just statically setting score to be = 1 on each iteration. What you need to be doing is incrementing the score with each checked box. What you're currently doing is something like this (there's no reason to use an array):
var pointValue = 1;
function getScore(){
for(...){
if(...){
score = pointValue;
}
}
return score;
}
What you need to be doing is something more like:
var pointValue = 1;
function getScore(){
var score = 0;
for(...){
if(...){
score = score + pointValue;
}
}
return score;
}
This will increase the score each time a checkbox is found, rather than resetting it to 1.

Edit
See Declan McKelvey-Hembree's answer for a proper answer. This is just cleaned up code. I started writing this before his answer was posted, but it is based on the same points (and modernized a bit).
I dunno how that heck your code was supposed to work, but try this:
function getScore() {
const form = document.forms["form"];
const quest = form.elements["quiz"];
let score = 0;
for (let item of quest) {
if (item.checked) score += 1;
}
return score;
}
function getTotal() {
const totalScore = getScore();
document.getElementById("result").innerHTML = getComment(totalScore);
}
const zeroToOne =
"It is amazing that you already know all of these things about yourself and didnt need to take the quiz. Maybe you just wanted to see all of the possible result responses? Well played!";
const twoToSeven =
"I see that among your many talents and attributes, humility is still part of your charm!";
function getComment(score) {
if (score <= 1) return zeroToOne;
else if (score >= 2 && score <= 7) return twoToSeven;
}
document.getElementById("submit").onclick = getTotal;
.quiz-form {
margin-left:auto !important;
margin-right:auto !important;
max-width:700px;
}
#form {
text-align:left;
}
.column {
display: flex;
flex-direction: column;
}
<div class="quiz-form">
<form id="form" name="form">
<fieldset id="controls">
<p class="column">
<label> I enjoy reading for fun.
<input type="checkbox" name="quiz" />
</label>
<label> I like to write.
<input type="checkbox" name="quiz" />
</label>
<label> I enjoy other forms of self-expression, such as music and art.
<input type="checkbox" name="quiz" />
</label>
<label> I find discussing ideas with other people exciting.
<input type="checkbox" name="quiz" />
</label>
<label> I enjoy thinking through complex challenges.
<input type="checkbox" name="quiz" />
</label>
<label> I am curious about the world.
<input type="checkbox" name="quiz" />
</label>
<label> I am interested in a wide range of subjects.
<input type="checkbox" name="quiz" />
</label>
</p>
<p>
<button name="submit" id="submit" value="Submit" />
</p>
<p id="result"></p>
</fieldset>
</form>
</div>

Calculate inputs from form in Javascript and display in message field

I am trying to calculate a score and prompt one of 3 messages depending on the score. However, seems like I can't push the message to lower part of the form. Mind providing some guidance? THANKS!
Diabetes Risk Assessment Tool
The Diabetes Risk Assessment Tool
Please complete the form. Choose an option for each question *
<legend>Questions</legend>
<!-- How old are you?-->
<span>
<label for="age">How old are you? </label>
<input type="radio" value="0" name="age" id="#0-25" checked><label for="0-25">0-25</label>
<input type="radio" value="5" name="age" id="#26-40"><label for="26-40">26-40</label>
<input type="radio" value="8" name="age" id="#41-60"><label for="41-60">41-60</label>
<input type="radio" value="10" name="age" id="#60+"><label for="60+">60+</label><br>
</span
<span>
<label for="bmi">What is your BMI? </label>
<input type="radio" value="0" name="bmi" id="#0-25" checked><label for="0-25">0-25</label>
<input type="radio" value="0" name="bmi" id="#26-30"><label for="26-30">26-30</label>
<input type="radio" value="9" name="bmi" id="#31-35"><label for="31-35">31-35</label>
<input type="radio" value="10" name="bmi" id="#35+"><label for="35+">35+</label><br>
</span>
Does anybody in your family have diabetes?
No.
Grandparent
Sibling
Parent
How would you describe your diet?
Low-sugar
Normal sugar
Quite high sugar
High sugar
</fieldset>
<div id="displaymessage"></div>
</form>
//create variable radios with the radio button values
var radios = document.getElementsByTagName("input")
function calculateTotal(){
var total = 0;
for (i = 0; i < radios.length; i++) {
----------
if (radios[i].type == 'radio' && radios[i].checked) {
total += Number(radios[i].value);
}
}
return total;
}
//Display message Function
function displaymessage () {
//create empty variable
var message = 0
//run function calculate total and store in score var
score = calculateTotal()
//Depending on your score, you get a message
if (score < 15) {
message = "Your results show that you currently have a low risk of developing diabetes"
}
else if (score > 25) {
message = "Your results show that you currently have a high risk of developing diabetes. Your main risk factors are your" + risk1 + "and your" + risk2 + "We advise that you contact the Health Authority to discuss your risk factors as soon as you can. Your main risk are X and Y."
}
else {
message = "Your results show that you currently have a medium risk of developing diabetes"
}
//push result to element display message on HTML
document.getElementById('displaymessage').innerHTML = message;
}
document.getElementById("displaymessage").submit()
body {
font-family: Verdana, Arial, sans-serif;
}
.sectionheading {
color: #ff0000;
}
#pageheading{
font-style: italic;
}
label {
margin-left: 10px;
}
.radio-buttons input[type="radio"] {
width: 10px;
}
.radio-buttons label {
display: inline;
margin-left: 10px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Diabetes Risk Assessment Tool</title>
<link rel="stylesheet" type="text/css" href="examplestyles.css">
<script src="calculate.js"></script>
</head>
<h1>The Diabetes Risk Assessment Tool</h1>
<div class ="radio-inline">
<form id="assessment">
<p><i>Please complete the form. Choose an option for each question </i><em>*</em></p>
<fieldset>
<legend>Questions</legend>
<!-- How old are you?-->
<span>
<label for="age">How old are you? </label>
<input type="radio" value="0" name="age" id="#0-25" checked><label for="0-25">0-25</label>
<input type="radio" value="5" name="age" id="#26-40"><label for="26-40">26-40</label>
<input type="radio" value="8" name="age" id="#41-60"><label for="41-60">41-60</label>
<input type="radio" value="10" name="age" id="#60+"><label for="60+">60+</label><br>
</span
<!-- Does anybody in your family have diabetes? -->
<span>
<label for="bmi">What is your BMI? </label>
<input type="radio" value="0" name="bmi" id="#0-25" checked><label for="0-25">0-25</label>
<input type="radio" value="0" name="bmi" id="#26-30"><label for="26-30">26-30</label>
<input type="radio" value="9" name="bmi" id="#31-35"><label for="31-35">31-35</label>
<input type="radio" value="10" name="bmi" id="#35+"><label for="35+">35+</label><br>
</span>
<!-- Does anybody in your family have diabetes? -->
<label for="genetics">Does anybody in your family have diabetes? </label>
<input type="radio" value="0" name="genetics" id="No" checked><label for="no">No.</label>
<input type="radio" value="7" name="genetics" id="grandparent"><label for="grandparent">Grandparent</label>
<input type="radio" value="15" name="genetics" id="sibling"><label for="sibling">Sibling</label>
<input type="radio" value="15" name="genetics" id="parent"><label for="parent">Parent</label><br>
<!-- How would you describe your diet? -->
<label for="diet">How would you describe your diet? </label>
<input type="radio" value="0" name="diet" id="low-sugar" checked><label for="low-sugar">Low-sugar</label>
<input type="radio" value="0" name="diet" id="normal-sugar"><label for="normal-sugar">Normal sugar</label>
<input type="radio" value="7" name="diet" id="quite-highs-sugar"><label for="quite-highs-sugar">Quite high sugar</label>
<input type="radio" value="10" name="diet" id="high-sugar"><label for="high-sugar">High sugar</label><br>
<!-- Calculate -->
<p><input type="submit" name = "calculate" value="Calculate" id=calculate onsubmit= "displaymessage()" </p>
</fieldset>
<div id="displaymessage"></div>
</form>
</div>
</body>
</html>

Your function displaymessage function (that can be written in camel case displayMessage as in Javascript common notation) is not being called properly. To make sure you call this function whenever the form is being submitted, you have to also make sure that you capture the event and prevent it from refreshing the page as it is by default on the <form> html element:
document.getElementById('assessment').addEventListener("submit", function(event) {
event.preventDefault();
displaymessage();
});
Also remove this line from your calculate.js file:
document.getElementById("displaymessage").submit()
and remove onsubmit listener from the input button, it is redundant:
<p><input type="submit" name="calculate" value="Calculate" id="calculate"></p>
making sure that the id has quotes around the value: id="calculate"
Finally, you can get risk1 and risk2 values by storing the values and names from all the radio elements and sorting them afterwards:
first step: Initialise your two variables risk1 and risk2 at the top of your calculate.js file:
var risk1, risk2;
second step: edit your calculateTotal function to this:
function calculateTotal() {
var objectArray = []; // initialise empty array
var total = 0;
for (i = 0; i < radios.length; i++) {
if (radios[i].type == 'radio' && radios[i].checked) {
//save the values and names of the radio buttons into an array of objects
objectArray.push({
value: Number(radios[i].value),
name: radios[i].name
});
total += Number(radios[i].value);
}
}
//sorting the array ascendingly
objectArray.sort(function(a, b){return a.value - b.value});
// getting the name property of the last two values of the array that are the highest in value
risk1 = objectArray[objectArray.length - 1].name;
risk2 = objectArray[objectArray.length - 2].name;
return total;
}
third step: make sure you properly display the message:
if (score < 15) {
message = "Your results show that you currently have a low risk of developing diabetes"
} else if (score > 25) {
message = "Your results show that you currently have a high risk of developing diabetes. Your main risk factors are your " + risk1 + " and your " + risk2 + ". We advise that you contact the Health Authority to discuss your risk factors as soon as you can. Your main risk are " + risk1 + " and " + risk2;
} else {
message = "Your results show that you currently have a medium risk of developing diabetes"
}

Javascript not behaving as expected. Unable to identify cause.

in an attempt to make practical use of the skills I am learning on my web development course I am trying to create a website about the Vikings for my partner's Primary school class.
I have managed to get the HTML and CSS as I want it, but I'm struggling a little with the Javascript. it all looks fine to my mind but doesn't run as intended.
I have a quiz and a submit button. When clicked this button will reference a "checkresults" function in my .js file.
This should then calculate a result between 0 - 3 and post this result into the HTML page. I have designed the box the results will show in to be invisible until the "Submit" button is clicked. However, when ran the results box appears for only a second before disappearing and I cannot figure out why.
any help or advice would be very much appreciated!
//JAVASCRIPT//
function checkresults() {
var question1 = document.quiz.question1.value;
var question2 = document.quiz.question2.value;
var question3 = document.quiz.question3.value;
var correct = 0;
if (question1 == "793") {
correct++;
}
if (question2 == "Shield") {
correct++;
}
if (question3 == "1066") {
correct++;
}
var message = ["You're a real Viking!", "Not bad but you can do better!",
"Odin would not be pleased with your effort!"];
var range;
if (correct < 1) {
range = 2;
}
if (correct > 0 && correct < 3) {
range = 1;
}
if (correct > 2) {
range = 0;
}
document.getElementById("afterSubmit").style.visibility = "visible"
document.getElementById("message").innerHTML = message[ramge];
document.getElementById("correct").innerHTML = "You got " + correct + "
correct!";
}
//HTML//
<form id="quiz" name="quiz">
<p>When did the Vikings first invade Britain?</p>
<input type="radio" id="mc" name="question1" value="1066" />1066<br />
<input type="radio" id="mc" name="question1" value="793" />793<br />
<input type="radio" id="mc" name="question1" value="411" />411<br />
<input type="radio" id="mc" name="question1" value="1999" />1999<br />
<p>what did every man need before he was allowed to go Viking?</p>
<input type="radio" id="mc" name="question2" value="Shield" />Shield<br />
<input type="radio" id="mc"name="question2" value="Sword" />Sword<br />
<input type="radio" id="mc"name="question2" value="Cloak" />Cloak<br />
<input type="radio" id="mc" name-"question2" value="Gold" />Gold<br />
<p>when did the Viking age end?</p>
<input type="radio" id="mc" name="question3" value="793" />793<br />
<input type="radio" id="mc" name="question3" value="1999" />1999<br />
<input type="radio" id="mc" name="question3" value="1066" />1066<br />
<input type="radio" id="mc" name="question3" value="1500" />1500<br />
<input type="submit" id="button" value="Lets see how you did!" onclick =
"checkresults();">
</form>
<div id="afterSubmit">
<p id="message"></p>
<p id="correct"></p>
//CSS//
#afterSubmit {
visibility: hidden;
border-color: red;
border-style: solid;
border-width: 5px;
}

Your page is refreshing.
The best way to change this would be to move the function to the form onsubmit event.
//Remove the onclick
<input type="submit" id="button" value="Lets see how you did!" onclick="checkresults();">
Add the function and return false to the event on the form, so it cancels submission
//Add the onsubmit, notice the return false, so it cancels submission
<form id="quiz" name="quiz" onsubmit="checkresults();return false;">

Making a Form Fieldset text smaller after choosing an option

i'm new to Javascript and Jquery and i am trying to create a kind of questionnaire style page.
Essentially i want to ask a question, then once i have chosen an answer make everything in smaller and then display the next question in normal size.
I have most of the page working in terms of showing and hiding but i cant seem to get the code to work when i try to make the initial question text smaller.
Ive read lots of tutorials and examples but none seem to work, i'd really appreciate any guidance.
Thanks in advance !
Here is my HTML
<form>
<fieldset class="form1">
<p>what problem is the customer having ?</p>
<input type="radio" name="issue" value="o - issue1" onClick="getIssueVar()">issue1<br/>
<input type="radio" name="issue" value="o - issue2" onClick="getIssueVar()">issue2<br/>
<input type="radio" name="issue" value="o - issue3" onClick="getIssueVar()">issue3<br/>
<input type="radio" name="issue" value="o - issue4" onClick="getIssueVar()">issue4<br/>
</fieldset>
</form>
<br/>
Here is my Javascript:
function getIssueVar() {
var xissue = document.getElementById("testform");
var issuetext = "";
var iissue;
for (iissue = 0; iissue < xissue.length ;iissue++) {
if (xissue[iissue].checked) {
issuetext=xissue[iissue].value;
break;
}
}
document.getElementById("faultissue").innerHTML = issuetext;
$(".form2").show();
$(".form1").css('font-size', '10px');
}
I have set my css:
.form1
{
font-size:14px;
}
so i was thinking i would use javascript/jquery to change the font size once ive clicked on the radio buttons.
What am i doing wrong ?

HTML
<form>
<fieldset class="form1">
<p>what problem is the customer having ?</p>
<input type="radio" name="issue" value="o - issue1" onClick="getIssueVar()" class="testform">issue1<br/>
<input type="radio" name="issue" value="o - issue2" onClick="getIssueVar()" class="testform">issue2<br/>
<input type="radio" name="issue" value="o - issue3" onClick="getIssueVar()" class="testform">issue3<br/>
<input type="radio" name="issue" value="o - issue4" onClick="getIssueVar()" class="testform">issue4<br/>
</fieldset>
</form>
<div id="faultissue"></div>
SCRIPT
function getIssueVar() {
debugger
var xissue = document.getElementsByClassName("testform");
var issuetext = "";
var iissue;
for (iissue = 0; iissue < xissue.length ;iissue++) {
if (xissue[iissue].checked) {
issuetext=xissue[iissue].value;
break;
}
}
document.getElementById("faultissue").innerHTML = issuetext;
$(".form2").show();
$(".form1").css('font-size', '10px');
}
DEMO
From your code it seems testform class is missing from radio button tag. And an element having id faultissue is missing too.

Here is a jQuery solution using a delegated on() click approach.
<form>
<fieldset class="form1">
<p>what problem is the customer having ?</p>
<input type="radio" name="issue" value="o - issue1" >issue1
<br>
<input type="radio" name="issue" value="o - issue2" >issue2
<br>
<input type="radio" name="issue" value="o - issue3" >issue3
<br>
<input type="radio" name="issue" value="o - issue4" >issue4
</fieldset>
</form>
.minimize {
font-size: 0.5em;
}
$('fieldset').on('click', 'input[type="radio"]', function() {
$radio = $(this);
$fieldset = $radio.parent();
$fieldset.addClass('minimize');
});
jsFiddle: http://jsfiddle.net/w4L1g2dc/
I added a class but you could set the CSS directly if you wanted.

How to show different links when certain questions are answered

How do I make it so that when I click AT&T, 8GB, and Black it shows a link and when I click Other, 8GB, and White it shows a different link. This is what I came up with. This is my first ever attempt so don't be rough on me. I'm trying to achieve something similar to http://glyde.com/sell/iphone-4s.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
.bgclr {background-color: white; color: black; font-weight: bold;}
-->
</style>
<script language="JavaScript">
<!-- Begin
var numQues = 3;
var numChoi = 3;
var answers = new Array(3);
// Do not change anything below here ...
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i=0; i<numQues; i++) {
currElt = i*numChoi;
for (j=0; j<numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == answers[i]) {
score++;
break;
}
}
}
}
</script>
</head>
<body>
<form name="quiz">
What carrier do you have?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q1" value="AT&T"/>AT&T</li>
<li><input type="radio" name="q1" value="Other"/>Other</li>
<li><input type="radio" name="q1" value="Unlocked"/>Unlocked</li>
</ul>
What is your phones capicity?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q2" value="8GB"/>8GB</li>
<li><input type="radio" name="q2" value="16GB"/>16GB</li>
</ul>
What color is your phone?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q3" value="Black"/>Black</li>
<li><input type="radio" name="q3" value="White"/>White</li>
</ul>
<input type="button" value="Get score" onClick="getScore(this.form)"/>
</body>
</html>
http://jsfiddle.net/XwN2L/2547/

OK. Add an "onclick" event to each element of the form, which calls a method called tryToMakeLink(). So for every element
<input type="radio" name="q1" value="AT&T"/>
should now read
<input type="radio" onclick=tryToMakeLink(); name="q1" value="AT&T"/>
Also, add a div to the bottom to display the dynamic link.
<form name="quiz" id='quiz'>
What carrier do you have?
<ul style="margin-top: 1pt">
<li><input type="radio" onclick=tryToMakeLink(); name="q1" value="AT&T"/>AT&T</li>
<li><input type="radio" onclick=tryToMakeLink(); name="q1" value="Other"/>Other</li>
<li><input type="radio" onclick=tryToMakeLink(); name="q1" value="Unlocked"/>Unlocked</li>
</ul>
What is your phones capicity?
<ul style="margin-top: 1pt">
<li><input type="radio" onclick=tryToMakeLink(); name="q2" value="8GB"/>8GB</li>
<li><input type="radio" onclick=tryToMakeLink(); name="q2" value="16GB"/>16GB</li>
</ul>
What color is your phone?
<ul style="margin-top: 1pt">
<li><input type="radio" onclick=tryToMakeLink(); name="q3" value="Black"/>Black</li>
<li><input type="radio" onclick=tryToMakeLink(); name="q3" value="White"/>White</li>
</ul>
<input type="button" value="Get score" onClick="getScore(this.form)"/>
<br>
<div id=linkDiv>
--
</div>
</form>
The tryToMakeLink() method does the following:
Look at each radio. If the user has not made a choice for each question, do nothing.
If the user has made a choice for each question, then show 1 link if they have 8gb at&t black, show another link if they have other 8gb white, show a 3rd link if they have any other combination. you can easily add other configurations by adding more else if clauses to the function.
So here it is (JavaScript)
function tryToMakeLink()
{
//get all selected radios
var q1=document.querySelector('input[name="q1"]:checked');
var q2=document.querySelector('input[name="q2"]:checked');
var q3=document.querySelector('input[name="q3"]:checked');
//make sure the user has selected all 3
if (q1==null || q2==null ||q3==null)
{
document.getElementById("linkDiv").innerHTML="--";
}
else
{
//now we know we have 3 radios, so get their values
q1=q1.value;
q2=q2.value;
q3=q3.value;
//now check the values to display a different link for the desired configuration
if (q1=="AT&T" && q2=="8GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<a href=#>att 8gb black</a>";
}
else if (q1=="Other" && q2=="8GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<a href=#>other 8b white</a>";
}
else
{
document.getElementById("linkDiv").innerHTML="<a href=#>some third option</a>";
}
}
}
This is all javascript, as indicated by your post; however you may want to look into jQuery.
EDIT:
A better way to do this is to bind the click event to each radio when the document loads, instead of needing an "onclick=" in each input tag.
so you add an onload to your body
<body onLoad="attachClickEvents();">
and add this javascript
function attachClickEvents()
{
var inputs=document.getElementById('quiz').elements;
for (var i=0;i<inputs.length;i++)
{
inputs[i].onclick = function() {
tryToMakeLink();
};
}
}

I think that this could help you!
How to change the images on button click
It is another SO question that I found useful for the same thing!