How do i add page numbers on html - javascript

How can I add page numbers to a quiz I am making, it needs to all be in the same file though? So, after the first x many questions have been answered, you click next, to go onto the next page after that you go onto the answers? But all in the same code? How can I do this? I've tried looking on various websites to find this but I cannot see how!
Thanks,
Nick
Code:
<h1>Final Quiz for Lip building</h1>
<form action="grade.php" method="post" id="quiz">
<ol>
<li>
<h3>CSS Stands for...</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" />
<label for="question-1-answers-A">A) Computer Styled Sections </label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" />
<label for="question-1-answers-B">B) Cascading Style Sheets</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" />
<label for="question-1-answers-C">C) Crazy Solid Shapes</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-D" value="D" />
<label for="question-1-answers-D">D) None of the above</label>
</div>
</li>
<li>
<h3>Internet Explorer 6 was released in...</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A" />
<label for="question-2-answers-A">A) 2001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B" />
<label for="question-2-answers-B">B) 1998</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C" />
<label for="question-2-answers-C">C) 2006</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D" />
<label for="question-2-answers-D">D) 2003</label>
</div>
</li>
<li>
<h3>SEO Stand for...</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A" />
<label for="question-3-answers-A">A) Secret Enterprise Organizations</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B" />
<label for="question-3-answers-B">B) Special Endowment Opportunity</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-C" value="C" />
<label for="question-3-answers-C">C) Search Engine Optimization</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-D" value="D" />
<label for="question-3-answers-D">D) Seals End Olives</label>
</div>
</li>
<li>
<h3>A 404 Error...</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A" />
<label for="question-4-answers-A">A) is an HTTP Status Code meaning Page Not Found</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B" />
<label for="question-4-answers-B">B) is a good excuse for a clever design</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-C" value="C" />
<label for="question-4-answers-C">C) should be monitored for in web analytics</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-D" value="D" />
<label for="question-4-answers-D">D) All of the above</label>
</div>
</li>
<li>
<h3>Your favorite website is</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A" />
<label for="question-5-answers-A">A) CSS-Tricks</label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B" />
<label for="question-5-answers-B">B) CSS-Tricks</label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-C" value="C" />
<label for="question-5-answers-C">C) CSS-Tricks</label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-D" value="D" />
<label for="question-5-answers-D">D) CSS-Tricks</label>
</div>
</li>
</ol>
<input type="submit" value="Submit Quiz" />
</form>
and
PHP: `
<h1>Final Quiz for Lip building</h1>
<?php
$answer1 = $_POST['question-1-answers'];
$answer2 = $_POST['question-2-answers'];
$answer3 = $_POST['question-3-answers'];
$answer4 = $_POST['question-4-answers'];
$answer5 = $_POST['question-5-answers'];
$totalCorrect = 0;
if ($answer1 == "B") { $totalCorrect++; }
if ($answer2 == "A") { $totalCorrect++; }
if ($answer3 == "C") { $totalCorrect++; }
if ($answer4 == "D") { $totalCorrect++; }
if ($answer5) { $totalCorrect++; }
echo "<div id='results'>$totalCorrect / 5 correct</div>";
?>
</div>`
EDIT: THE NEXT CODE I ADDED WAS:
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-D" value="D" />
<label for="question-3-answers-D">D) Seals End Olives</label>
</div>
</li>
<script>
function getValue()
{
var x=document.getElementById("page_2");
alert(x.innerHTML);
}
</script>
<body>
<h1 id="page_2" onclick="getValue()">Click me to proceed!</h1>
</body>
</div>
</div>
<div id="page_2">
<div id="page-wrap">
<li>
<h3>A 404 Error...</h3>

Use specific <div> with id for every part & hide all other <div> except first part using css. Then use javascript function for showing every part sequentially. When showing 2nd part hide all other part using getElementById, do it all other part & store your result in a static variable, increase it in every part sequentially, hope it will work. check this code -
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#test2{display:none;}
#test3{display:none;}
</style>
<script>
function test1(){
document.getElementById('test2').style.display = 'block';
document.getElementById('test1').style.display = 'none';
}
</script>
</head>
<body>
<div id="test1" onclick='test1();'>testing1</div>
<div id="test2">testing2</div>
<div id="test3">testing3</div>
</html>

Related

How do I let the input types console log what the checked boxes

I want to let the checked filed console log all their values but it only shows one checked input
I want the console log to only show the value of which radio was checked but it automatically rather shows the value for the first checkbox
This is a fiddle link https://jsfiddle.net/Nancy4321/hjL3t5qd/
function newForm() {
var prof = document.querySelector('input[type=radio][name=group2]').value
var edu_level = document.querySelector('input[type=checkbox][name=group1]').value;
var pro_other = document.getElementById('pro_other').value;
var data = {
"prof": prof,
"edu_level": edu_level,
"pro_other": pro_other,
}
console.log(data);
}
<body>
<form>
<div class="card hoverable">
<div class="card-content" id="prof">
<p>Where do you want to go?</p>
<p>
<label>
<input value="Gym" type="checkbox" name="group1" />
<span>Gym</span>
</label>
</p>
<p>
<label>
<input value="Temple" type="checkbox" name="group1" />
<span>Temple</span>
</label>
</p>
<p>
<label>
<input value="Mars" type="checkbox" name="group1" />
<span>Mars</span>
</label>
</p>
<p>
<label>
<input value="space" type="checkbox" name="group1" />
<span>Space</span>
</label>
</p>
<p>
<label>
<input value="Home" type="checkbox" name="group1" />
<span>Home</span>
</label>
</p>
<p>
<label>
<input value="Cali" type="checkbox" name="group1" />
<span>Cali</span>
</label>
</p>
<p>
<label>
<input value="Tulsa" type="checkbox" name="group1" />
<span>Tulsa</span>
</label>
</p>
<p>
<label>
<input value="specify" type="checkbox" name="group1" />
<span>Other:<input id="pro_other" type="text" placeholder="Please Specify Here"></span>
</label>
</p>
</div>
</div>
<div class="card hoverable">
<div class="card-content" id="edu_level">
<p>Highest Level of Education </p>
<p>
<label>
<input value="Tertiary" class="with-gap" name="group2" type="radio" />
<span>Tertiary</span>
</label>
</p>
<p>
<label>
<input value="Secondary" class="with-gap" name="group2" type="radio" />
<span>Secondary</span>
</label>
</p>
<p>
<label>
<input value="Junior Secondary" class="with-gap" name="group2" type="radio" />
<span>Junior Secondary</span>
</label>
</p>
</div>
</div>
<div>
<button type="submit" name="action" onclick="newForm()">Submit
</button>
</div>
</form>
</body>
Have a go with this - you need to iterate the checkboxes
Here I get the values of the checked elements
Note I gave the form an ID and removed the inline button click
document.getElementById("newform").addEventListener("submit",function(e) {
e.preventDefault(); // remove when tested
const prof = [...document.querySelectorAll('input[type=radio][name=group2]:checked')].map(elem => elem.value)
const edu_level = document.querySelector('input[type=checkbox][name=group1]:checked').value;
const pro_other = document.getElementById('pro_other').value;
var data = {
"prof": prof,
"edu_level": edu_level,
"pro_other": pro_other
}
console.log(data);
})
<body>
<form id="newform">
<div class="card hoverable">
<div class="card-content" id="prof">
<p>Where do you want to go?</p>
<p>
<label>
<input value="Gym" type="checkbox" name="group1" />
<span>Gym</span>
</label>
</p>
<p>
<label>
<input value="Temple" type="checkbox" name="group1" />
<span>Temple</span>
</label>
</p>
<p>
<label>
<input value="Mars" type="checkbox" name="group1" />
<span>Mars</span>
</label>
</p>
<p>
<label>
<input value="space" type="checkbox" name="group1" />
<span>Space</span>
</label>
</p>
<p>
<label>
<input value="Home" type="checkbox" name="group1" />
<span>Home</span>
</label>
</p>
<p>
<label>
<input value="Cali" type="checkbox" name="group1" />
<span>Cali</span>
</label>
</p>
<p>
<label>
<input value="Tulsa" type="checkbox" name="group1" />
<span>Tulsa</span>
</label>
</p>
<p>
<label>
<input value="specify" type="checkbox" name="group1" />
<span>Other:<input id="pro_other" type="text" placeholder="Please Specify Here"></span>
</label>
</p>
</div>
</div>
<div class="card hoverable">
<div class="card-content" id="edu_level">
<p>Highest Level of Education </p>
<p>
<label>
<input value="Tertiary" class="with-gap" name="group2" type="radio" />
<span>Tertiary</span>
</label>
</p>
<p>
<label>
<input value="Secondary" class="with-gap" name="group2" type="radio" />
<span>Secondary</span>
</label>
</p>
<p>
<label>
<input value="Junior Secondary" class="with-gap" name="group2" type="radio" />
<span>Junior Secondary</span>
</label>
</p>
</div>
</div>
<div>
<button type="submit" name="action">Submit
</button>
</div>
</form>
</body>
Your problem is document.querySelector only selects the first element. To do what you want, you will need to use document.querySelectorAll to select all the inputs, and get their value with the loop.
Or use document.querySelector('input[type=radio][name=group2]:checked') to select only checked inputs on the page. You can read more about :checked here.

HTML forms - multiple choice form to plain text

I would like to create fillable form to html and save it to text file or just on site have a box making everything checked copyable as plain text.
<img id="top" src="top.png" alt="">
<div id="form_container">
<h1><a>MEDICAL HISTORY QUESTIONNAIRE</a></h1>
<form id="form_25714" class="appnitro" method="post" action="">
<div class="form_description">
<h2>MEDICAL HISTORY QUESTIONNAIRE</h2>
<p></p>
</div>
<ul>
<li id="li_1">
<label class="description" for="element_1">Visit in the presence of </label>
<span>
<input id="element_1_1" name="element_1" class="element radio" type="radio" value="1" />
<label class="choice" for="element_1_1">parents</label>
<input id="element_1_2" name="element_1" class="element radio" type="radio" value="2" />
<label class="choice" for="element_1_2">mother</label>
<input id="element_1_3" name="element_1" class="element radio" type="radio" value="3" />
<label class="choice" for="element_1_3">father</label>
<input id="element_1_4" name="element_1" class="element radio" type="radio" value="4" />
<label class="choice" for="element_1_4">grandmother</label>
<input id="element_1_5" name="element_1" class="element radio" type="radio" value="5" />
<label class="choice" for="element_1_5">grandfather</label>
<input id="element_1_6" name="element_1" class="element radio" type="radio" value="6" />
<label class="choice" for="element_1_6">grandparents</label>
</span>
</li>
<li id="li_2">
<label class="description" for="element_2">Chronic diesases </label>
<div>
<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_3">
<label class="description" for="element_3">Allergies </label>
<div>
<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_4">
<label class="description" for="element_4">Medical history </label>
<div>
<textarea id="element_4" name="element_4" class="element textarea medium"></textarea>
</div>
</li>
<li id="li_5">
<label class="description" for="element_5">Meningism </label>
<span>
<input id="element_5_1" name="element_5" class="element radio" type="radio" value="1" />
<label class="choice" for="element_5_1">negative</label>
<input id="element_5_2" name="element_5" class="element radio" type="radio" value="2" />
<label class="choice" for="element_5_2">positive</label>
</span>
</li>
<li id="li_7">
<label class="description" for="element_7">Skin </label>
<span>
<input id="element_7_1" name="element_7" class="element radio" type="radio" value="1" />
<label class="choice" for="element_7_1">Normal, without purpura</label>
<input id="element_7_2" name="element_7" class="element radio" type="radio" value="2" />
<label class="choice" for="element_7_2"><input id="element_7_2" name="element_7_2" class="element text medium" type="text" maxlength="800" value=""/> </label>
</span>
</li>
<li id="li_6">
<label class="description" for="element_6">Temperature </label>
<div>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="25714" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
</div>
<img id="bottom" src="bottom.png" alt="">
So for example I filled the form like this
form filled example
So example output would be:
Chronic diesases none
Allergies none
Medical history
since 3 days diahrerra vomiting, temp 38,5 C
Skin rash on legs
Temperature 38,1
So I would liek to the unchecked values to be omitted and checked to be filled
How to do that? I want to make physical examination easier, I'm sick of always typing everythig
Here you go, you can go ahead and do something with the String now
const $ = (s) => document.querySelector(s);
const $$ = (s) => document.querySelectorAll(s);
$("#saveForm").addEventListener("click", function (evt) {
evt.preventDefault(); // don't submit the form
let output = [];
// set first field if radio checked
let inPresenceOf = Array.from($$("input[type='radio'][id^='element_1_']")).filter(element => element.checked);
if(inPresenceOf.length === 1) output.push($("label[for='element_1']").innerHTML + " " + $("label[for='"+inPresenceOf[0].id+"']").innerHTML);
// set second field if value not empty
if($("#element_2").value.trim()) output.push("Chronic diesases: " + $("#element_2").value.trim());
// set third field if value not empty
if($("#element_3").value.trim()) output.push("Allergies: " + $("#element_3").value.trim());
// set fourth field if value not empty
if($("#element_4").value.trim()) output.push("Medical History: " + $("#element_3").value.trim());
// set fifth field if radio checked
let meningism = Array.from($$("input[type='radio'][id^='element_5_']")).filter(element => element.checked);
if(meningism.length === 1) output.push("Meningism " + $("label[for='"+meningism[0].id+"']").innerHTML);
// set sixth field if radio checked
let skin = Array.from($$("input[type='radio'][id^='element_7_']")).filter(element => element.checked);
if(skin.length === 1) {
if($("label[for='"+skin[0].id+"']").innerHTML === "Normal, without purpura")
output.push("Skin: Normal, without purpura");
else output.push("Skin: " + $("#element_7_2").value);
}
// set seventh field if value not empty
if($("#element_6").value.trim()) output.push("Temperature: " + $("#element_6").value.trim());
const outputString = output.join("\n");
console.log(outputString)
})
<img id="top" src="top.png" alt="">
<div id="form_container">
<h1><a>MEDICAL HISTORY QUESTIONNAIRE</a></h1>
<form id="form_25714" class="appnitro" method="post" action="">
<div class="form_description">
<h2>MEDICAL HISTORY QUESTIONNAIRE</h2>
<p></p>
</div>
<ul>
<li id="li_1">
<label class="description" for="element_1">Visit in the presence of </label>
<span>
<input id="element_1_1" name="element_1" class="element radio" type="radio" value="1" />
<label class="choice" for="element_1_1">parents</label>
<input id="element_1_2" name="element_1" class="element radio" type="radio" value="2" />
<label class="choice" for="element_1_2">mother</label>
<input id="element_1_3" name="element_1" class="element radio" type="radio" value="3" />
<label class="choice" for="element_1_3">father</label>
<input id="element_1_4" name="element_1" class="element radio" type="radio" value="4" />
<label class="choice" for="element_1_4">grandmother</label>
<input id="element_1_5" name="element_1" class="element radio" type="radio" value="5" />
<label class="choice" for="element_1_5">grandfather</label>
<input id="element_1_6" name="element_1" class="element radio" type="radio" value="6" />
<label class="choice" for="element_1_6">grandparents</label>
</span>
</li>
<li id="li_2">
<label class="description" for="element_2">Chronic diesases </label>
<div>
<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_3">
<label class="description" for="element_3">Allergies </label>
<div>
<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_4">
<label class="description" for="element_4">Medical history </label>
<div>
<textarea id="element_4" name="element_4" class="element textarea medium"></textarea>
</div>
</li>
<li id="li_5">
<label class="description" for="element_5">Meningism </label>
<span>
<input id="element_5_1" name="element_5" class="element radio" type="radio" value="1" />
<label class="choice" for="element_5_1">negative</label>
<input id="element_5_2" name="element_5" class="element radio" type="radio" value="2" />
<label class="choice" for="element_5_2">positive</label>
</span>
</li>
<li id="li_7">
<label class="description" for="element_7">Skin </label>
<span>
<input id="element_7_1" name="element_7" class="element radio" type="radio" value="1" />
<label class="choice" for="element_7_1">Normal, without purpura</label>
<input id="element_7_2" name="element_7" class="element radio" type="radio" value="2" />
<label class="choice" for="element_7_2"><input id="element_7_2" name="element_7_2" class="element text medium" type="text" maxlength="800" value=""/> </label>
</span>
</li>
<li id="li_6">
<label class="description" for="element_6">Temperature </label>
<div>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="25714" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
</div>
Are you familiar with Javascript/jQuery?
You need to use some form of logic to determine whether the field is null or not, or whether the box is checked or not
<form>
<input type="checkbox" data-val="Has Hemorrhoids"/>Hemmorhoids<br/>
<input type="checkbox" data-val="Has Severe Anal Fissures"/>Anal Fissures<br/>
<button id="create_final_summary">Make Summary</button>
</form>
<script>
$('#create_final_summary').on('click', function(){
var allFields = $(this).parents('form').find('input');
console.log(allFields);
allFields.each(function(){
if($(this).prop('checked' == true)){
$("#final_summary").append($(this).attr('data-val'));
}
});
});
You can use JavaScript to extract the text data as an object and view the properties of that object (view it in the console):
var relatives = document.body.querySelectorAll("#relativesChoices .radio");
var chronicInput = document.body.querySelector("#element_2");
var allergyInput = document.body.querySelector("#element_3");
var historyInput = document.body.querySelector("#element_4");
var meninigsm = document.body.querySelectorAll("#meninigsm .radio");
var skin = document.body.querySelectorAll("#skin .radio");
var temp = document.body.querySelector("#element_6");
var finalResult = {
relatives:"",
chronic: "",
allergies: "",
medicalHistory: "",
meningism :"",
skin:"",
temparture:""
}
function displayResults(){
for (var choice of relatives){
if(choice.checked === true){
finalResult.relatives = choice.value;
}
}
for (var choice of meninigsm){
if(choice.checked === true){
finalResult.meningism = choice.value;
}
}
for (var choice of skin){
if(choice.checked === true){
finalResult.skin = choice.value;
}
}
finalResult.chronic = chronicInput.value;
finalResult.allergies = allergyInput.value;
finalResult.medicalHistory = historyInput.value;
finalResult.temparture = temp.value;
console.log(finalResult);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MEDICAL HISTORY QUESTIONNAIRE</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
</head>
<body id="main_body" >
<img id="top" src="top.png" alt="">
<div id="form_container">
<h1><a>MEDICAL HISTORY QUESTIONNAIRE</a></h1>
<form id="form_25714" class="appnitro" method="post" action="">
<div class="form_description">
<h2>MEDICAL HISTORY QUESTIONNAIRE</h2>
<p></p>
</div>
<ul >
<li id="li_1" >
<label class="description" for="element_1">Visit in the presence of </label>
<span id="relativesChoices">
<input value="parents" id="element_1_1" name="element_1" class="element radio" type="radio" value="1" />
<label class="choice" for="element_1_1">parents</label>
<input value="mother" id="element_1_2" name="element_1" class="element radio" type="radio" value="2" />
<label class="choice" for="element_1_2">mother</label>
<input value="father" id="element_1_3" name="element_1" class="element radio" type="radio" value="3" />
<label class="choice" for="element_1_3">father</label>
<input value="grandmother" id="element_1_4" name="element_1" class="element radio" type="radio" value="4" />
<label class="choice" for="element_1_4">grandmother</label>
<input value="grandfather " id="element_1_5" name="element_1" class="element radio" type="radio" value="5" />
<label class="choice" for="element_1_5">grandfather</label>
<input value="grandparents" id="element_1_6" name="element_1" class="element radio" type="radio" value="6" />
<label class="choice" for="element_1_6">grandparents</label>
</span>
</li> <li id="li_2" >
<label class="description" for="element_2">Chronic diesases </label>
<div>
<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li> <li id="li_3" >
<label class="description" for="element_3">Allergies </label>
<div>
<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li> <li id="li_4" >
<label class="description" for="element_4">Medical history </label>
<div>
<textarea id="element_4" name="element_4" class="element textarea medium"></textarea>
</div>
</li> <li id="li_5" >
<label class="description" for="element_5">Meningism </label>
<span id="meninigsm">
<input value="negative" id="element_5_1" name="element_5" class="element radio" type="radio" value="1" />
<label class="choice" for="element_5_1">negative</label>
<input value="positive" id="element_5_2" name="element_5" class="element radio" type="radio" value="2" />
<label class="choice" for="element_5_2">positive</label>
</span>
</li> <li id="li_7" >
<label class="description" for="element_7">Skin </label>
<span id="skin">
<input id="element_7_1" name="element_7" class="element radio" type="radio" value="normal" />
<label class="choice" for="element_7_1">Normal, without purpura</label>
<input id="element_7_2" name="element_7" class="element radio" type="radio" value="abnormal" />
<label class="choice" for="element_7_2"><input id="element_7_2" name="element_7_2" class="element text medium" type="text" maxlength="800" value=""/> </label>
</span>
</li> <li id="li_6" >
<label class="description" for="element_6">Temperature </label>
<div>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li>
<button onclick="displayResults()">displayResults<button>
<li class="buttons">
<input type="hidden" name="form_id" value="25714" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
</div>
<img id="bottom" src="bottom.png" alt="">
</body>
</html>

Select radio button and display correct

I am a bit new to JS and HTML5. I am creating a simple quiz, just for the heck of it. I know need to make it possible for each question to be marked "correct" independently of the others. How can I do that through JS, or even CSS/HTML5? I have a feeling I need to change the jquery file, but I am a little stuck on how to do it. The quiz works perfect, just the way I want, but as a user selects an answer, I'd like to display correct or wrong. Thank you!
if (jQuery) {
var checkAnswers = function() {
var answerString = "";
var answers = $(":checked");
answers.each(function(i) {
answerString = answerString + answers[i].value;
});
$(":checked").each(function(i) {
var answerString = answerString + answers[i].value;
});
checkIfCorrect(answerString);
};
var checkIfCorrect = function(theString) {
if (parseInt(theString, 16) === 811124566973) {
$("body").addClass("correct");
$("h1").text("You Win!");
}
};
$("#question1").show();
};
if (impress) {
$("#question2").show();
};
if (atom) {
$("#question3").show();
};
if (createjs) {
$("#question4").show();
};
if (me) {
$("#question5").show();
};
if (require) {
$("#question6").show();
};
if ($().playground) {
$("#question7").show();
};
if (jaws) {
$("#question8").show();
};
if (enchant) {
$("#question9").show();
};
if (Crafty) {
$("#question10").show();
};
body {
margin-left: 50px;
}
#question1,
#question2,
#question3,
#question4,
#question5,
#question6,
#question7,
#question8,
#question9,
#question10 {
display: none;
}
canvas {
display: none;
}
.correct {
background-color: #24399f;
color: white;
}
#question1 {
background-color: #EBF5D1;
}
#question2 {
background-color: #E0F0D4;
}
#question3 {
background-color: #D6EBD6;
}
#question4 {
background-color: #CCE6D9;
}
#question5 {
background-color: #C2E0DB;
}
#question6 {
background-color: #B8DBDE;
}
#question7 {
background-color: #ADD6E0;
}
#question8 {
background-color: #A3D1E3;
}
#question9 {
background-color: #99CCE6;
}
#question10 {
background-color: #8FC7E8;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Quiz</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body onclick="checkAnswers();">
<h1>Quiz</h1>
<div id="quiz">
<div id="question1">
<div class="question">Which is not a main file type that we use to make websites?</div>
<input type="radio" name="question1" value="a" />
<label>.html</label>
<input type="radio" name="question1" value="b" />
<label>.exe</label>
<input type="radio" name="question1" value="c" />
<label>.js</label>
<input type="radio" name="question1" value="d" />
<label>.css</label>
</div>
<br />
<div id="question2">
<div class="question">A JavaScript object is wrapped by what charaters?</div>
<input type="radio" name="question2" value="a" />
<label>[]</label>
<input type="radio" name="question2" value="b" />
<label>;;</label>
<input type="radio" name="question2" value="c" />
<label>{}</label>
<input type="radio" name="question2" value="d" />
<label>()</label>
</div>
<br />
<div id="question3">
<div class="question">Moles are which of the following?</div>
<input type="radio" name="question3" value="a" />
<label>Omniverous</label>
<input type="radio" name="question3" value="b" />
<label>Adorable</label>
<input type="radio" name="question3" value="c" />
<label>Whackable</label>
<input type="radio" name="question3" value="d" />
<label>All of the above</label>
</div>
<br />
<div id="question4">
<div class="question">In Japanese "か" is prounounced...</div>
<input type="radio" name="question4" value="a" />
<label>ka</label>
<input type="radio" name="question4" value="b" />
<label>ko</label>
<input type="radio" name="question4" value="c" />
<label>ke</label>
<input type="radio" name="question4" value="d" />
<label>ki</label>
</div>
<br />
<div id="question5">
<div class="question">The gravitational constant on earth is approximately...</div>
<input type="radio" name="question5" value="a" />
<label>10m/s^2</label>
<input type="radio" name="question5" value="b" />
<label>.809m/s^2</label>
<input type="radio" name="question5" value="c" />
<label>9.81m/s^2</label>
<input type="radio" name="question5" value="d" />
<label>84.4m/s^2</label>
</div>
<br />
<div id="question6">
<div class="question">45 (in base 10) is what in binary (base 2)?</div>
<input type="radio" name="question6" value="a" />
<label>101101</label>
<input type="radio" name="question6" value="b" />
<label>110011</label>
<input type="radio" name="question6" value="c" />
<label>011101</label>
<input type="radio" name="question6" value="d" />
<label>101011</label>
</div>
<br />
<div id="question7">
<div class="question">4
<< 2=. ..</div>
<input type="radio" name="question7" value="a" />
<label>16</label>
<input type="radio" name="question7" value="b" />
<label>4</label>
<input type="radio" name="question7" value="c" />
<label>2</label>
<input type="radio" name="question7" value="d" />
<label>8</label>
</div>
<br />
<div id="question8">
<div class="question">Given the lengths of two sides of a right triangle (one with a 90 degree angle), how would you find the hypotenuse?</div>
<input type="radio" name="question8" value="a" />
<label>Pi*Radius^2</label>
<input type="radio" name="question8" value="b" />
<label>Pythagorean Theorem</label>
<input type="radio" name="question8" value="c" />
<label>Calculator?</label>
<input type="radio" name="question8" value="d" />
<label>Sin(side1 + side2)</label>
</div>
<br />
<div id="question9">
<div class="question">True or False: All games must run at at least 60 frames per second to be any good.</div>
<input type="radio" name="question9" value="a" />
<label>True</label>
<input type="radio" name="question9" value="b" />
<label>False</label>
</div>
<br />
<div id="question10">
<div class="question">Using a server can help you to...</div>
<input type="radio" name="question10" value="a" />
<label>hide your code.</label>
<input type="radio" name="question10" value="b" />
<label>have a performant game.</label>
<input type="radio" name="question10" value="c" />
<label>create shared experiences for players.</label>
<input type="radio" name="question10" value="d" />
<label>all of the above.</label>
</div>
</div>
<script src="jquery.js"></script>
<script src="impress.js"></script>
<!-- atom needs this to run -->
<canvas></canvas>
<script src="atom.js"></script>
<script src="easel.js"></script>
<script src="melon.js"></script>
<script src="yabble.js"></script>
<script src="jquery.gamequery.js"></script>
<script src="jaws.js"></script>
<script src="enchant.js"></script>
<script src="crafty.js"></script>
<script src="game.js"></script>
</body>
</html>
I don't know if I understand well but did you try it with onChange event? At first I recommend to create JSON file with your correct answers, and after every checkbox must be answer element. Something like this:
jQuery('your-form your-input').on('change', function(e) {
e.preventDefault();
var actualAnswer = (jQuery(this).val() == 'your-correct-answer-in-json') ? 'Correct' : 'Incorrect';
/* add actualAnswer to element, for example with parent and find answer element to actual input */
});

Getting radio button values for multiple radio button sets

I'm setting up a multiple choice questionnaire with the responses being handling by radio buttons labelled A, B, C and D.
I want to identify the answer to each question by getting the form ID and the clicked button value, so that, for example, a response using the first set of radio buttons might be 1B and the second, 2D and so on (the form ID script is already up and running).
I need this to work on a page with multiple sets of radio buttons
Here is the HTML:
<form class="toeic_pages" id="1">
<label class="item1">
<input type="radio" value="A" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item2">
<input type="radio" value="B" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item3">
<input type="radio" value="C" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item4">
<input type="radio" value="D" name="toeic"/>
<div class="radio-image"></div>
</label>
</form>
...
<form class="toeic_pages" id="2">
<label class="item1">
<input type="radio" value="A" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item2">
<input type="radio" value="B" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item3">
<input type="radio" value="C" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item4">
<input type="radio" value="D" name="toeic"/>
<div class="radio-image"></div>
</label>
</form>
However, while I've been able to get a checked radio button value using this:
jQuery('input[name=toeic]').change(function(){
var invar = jQuery('input[name=toeic]:checked').val();
alert(invar);
});
The script is only effective within the first row of buttons clicked.
To illustrate, if in the first row of buttons to be accessed, button B is clicked then B is displayed (correct).
But, if in another row, button C clicked, B is displayed (incorrect) .. and B continues to be displayed for all subsequent button clicks. I've checked out the SO pages on this but I haven't been able to find a solution - the issue seems to be multiple sets of radio buttons.
Any help would be very much appreciated
You could do something like this :
$(document).ready(function() {
$("#finish").click(function() {
var answersList = [];
//Loop over all questoins
$(".toeic_pages").each(function() {
var questionId = $(this).attr("id");
var answer = $("input[name='toeic']:checked", $(this)).val();
//if Answer isnt provided do not update the answersList
if (answer !== undefined) {
answersList.push({
question: questionId,
answer: answer
});
}
});
console.log(answersList);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="toeic_pages" id="1">
<label class="item1">
<input type="radio" value="A" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item2">
<input type="radio" value="B" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item3">
<input type="radio" value="C" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item4">
<input type="radio" value="D" name="toeic" />
<div class="radio-image"></div>
</label>
</form>
...
<form class="toeic_pages" id="2">
<label class="item1">
<input type="radio" value="A" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item2">
<input type="radio" value="B" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item3">
<input type="radio" value="C" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item4">
<input type="radio" value="D" name="toeic" />
<div class="radio-image"></div>
</label>
</form>
<button id="finish">Get Answers</button>
I think this is exactly what you need.
$('#1 input').on('change', function() {
alert($('#1').attr('id')+$('input[name=radioName]:checked', '#1').val());
});
$('#2 input').on('change', function() {
alert($('#2').attr('id')+$('input[name=radioName]:checked', '#2').val());
});
$('#3 input').on('change', function() {
alert($('#3').attr('id')+$('input[name=radioName]:checked', '#3').val());
});
$('#4 input').on('change', function() {
alert($('#4').attr('id')+$('input[name=radioName]:checked', '#4').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="1">
Question 1
<br>
<input type="radio" name="radioName" value="A" /> A <br />
<input type="radio" name="radioName" value="B" /> B <br />
<input type="radio" name="radioName" value="C" /> C <br />
</form>
<form id="2">
Question 2
<br>
<input type="radio" name="radioName" value="A" /> A <br />
<input type="radio" name="radioName" value="B" /> B <br />
<input type="radio" name="radioName" value="C" /> C <br />
</form>
<form id="3">
Question 3
<br>
<input type="radio" name="radioName" value="A" /> A <br />
<input type="radio" name="radioName" value="B" /> B <br />
<input type="radio" name="radioName" value="C" /> C <br />
</form>
<form id="4">
Question 4
<br>
<input type="radio" name="radioName" value="A" /> A <br />
<input type="radio" name="radioName" value="B" /> B <br />
<input type="radio" name="radioName" value="C" /> C <br />
</form>
Credits to the owner of this answer #Peter J in this question How can I know which radio button is selected via jQuery?

Enabling Submit Button after clicking checkbox

I have been struggling with getting the following code to work (example taken from jsfiddle after looking at responses in this forum.
Can anyone see where I'm going wrong?
<script type="text/javascript">
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<h1>Button should be enabled if at least one checkbox is checked</h1>
<form>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
</div>
<div>
<input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label>
</div>
<div>
<input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label>
</div>
<div>
<input type="submit" value="Do thing" disabled>
</div>
</form>

Categories