Images don't show up in quiz results after start over button

Images don't show up in quiz results after start over button - javascript

I'm posting this question again as I have a new problem now with my quiz. When I first take the quiz it works fine, then I click on the start over button to start the quiz again and it works just as well until I get to the results page, where the text and start over button appear but the images do not! How can I fix this?
$(document).ready(function(){ // DOC READY
var totalQuestions = $('.questionarea').length; // VARIABLES
var currentQuestion = 0;
var $progressbar = $("#progressbar");
var score = 0;
var value = 0;
$questions = $('.questionarea');
$questions.hide();
$("#startover").on("click", function(){ // STARTOVER
$(this).hide();
$(".answers").hide();
$("#images").hide();
$("#score").hide();
$(".btn-lg").show();
score = 0;
value = 0;
currentQuestion = 0;
$progressbar.val(value);
$questions.hide();
});
$(document).on("click", ".btn-lg", function(){ // START BUTTON FADE OUT
$(this).hide();
$progressbar.show(200);
$(".answers").show(200);
$($questions.get(currentQuestion)).fadeIn();
});
$(document).on("click", '.answers input', function(){ // NEW QUESTIONS FADE IN + PROGRESS BAR
$($questions.get(currentQuestion)).fadeOut(200, function () {
currentQuestion ++;
if (currentQuestion === totalQuestions){
$("#results").fadeIn(200);
}
else {
$questions.eq(currentQuestion).fadeIn(200);
}
value = value + 10;
$progressbar.val(value);
});
});
function calcScore() { // OPTIONS CHECKED
var house1 = document.getElementById('option1').checked;
var house2 = document.getElementById('option8').checked;
var house3 = document.getElementById('option11').checked;
var house4 = document.getElementById('option16').checked;
var house5 = document.getElementById('option18').checked;
var house6 = document.getElementById('option23').checked;
var house7 = document.getElementById('option27').checked;
var house8 = document.getElementById('option32').checked;
var house9 = document.getElementById('option35').checked;
var house10 = document.getElementById('option36').checked;
var sher1 = document.getElementById('option2').checked;
var sher2 = document.getElementById('option6').checked;
var sher3 = document.getElementById('option10').checked;
var sher4 = document.getElementById('option14').checked;
var sher5 = document.getElementById('option19').checked;
var sher6 = document.getElementById('option24').checked;
var sher7 = document.getElementById('option26').checked;
var sher8 = document.getElementById('option29').checked;
var sher9 = document.getElementById('option33').checked;
var sher10 = document.getElementById('option37').checked;
var cas1 = document.getElementById('option3').checked;
var cas2 = document.getElementById('option7').checked;
var cas3 = document.getElementById('option9').checked;
var cas4 = document.getElementById('option15').checked;
var cas5 = document.getElementById('option17').checked;
var cas6 = document.getElementById('option21').checked;
var cas7 = document.getElementById('option28').checked;
var cas8 = document.getElementById('option30').checked;
var cas9 = document.getElementById('option33').checked;
var cas10 = document.getElementById('option38').checked;
var brbad1 = document.getElementById('option4').checked;
var brbad2 = document.getElementById('option5').checked;
var brbad3 = document.getElementById('option12').checked;
var brbad4 = document.getElementById('option13').checked;
var brbad5 = document.getElementById('option20').checked;
var brbad6 = document.getElementById('option22').checked;
var brbad7 = document.getElementById('option25').checked;
var brbad8 = document.getElementById('option31').checked;
var brbad9 = document.getElementById('option34').checked;
var brbad10 = document.getElementById('option39').checked;
if(house1 === true){ // SCORE CALCULATION
score += 1;
}
if(house2 === true){
score += 1;
}
if(house3 === true){
score += 1;
}
if(house4 === true){
score += 1;
}
if(house5 === true){
score += 1;
}
if(house6 === true){
score += 1;
}
if(house7 === true){
score += 1;
}
if(house8 === true){
score += 1;
}
if(house9 === true){
score += 1;
}
if(house10 === true){
score += 1;
}
if(sher1 === true){
score += 2;
}
if(sher2 === true){
score += 2;
}
if(sher3 === true){
score += 2;
}
if(sher4 === true){
score += 2;
}
if(sher5 === true){
score += 2;
}
if(sher6 === true){
score += 2;
}
if(sher7 === true){
score += 2;
}
if(sher8 === true){
score += 2;
}
if(sher9 === true){
score += 2;
}
if(sher10 === true){
score += 2;
}
if(cas1 === true){
score += 3;
}
if(cas2 === true){
score += 3;
}
if(cas3 === true){
score += 3;
}
if(cas4 === true){
score += 3;
}
if(cas5 === true){
score += 3;
}
if(cas6 === true){
score += 3;
}
if(cas7 === true){
score += 3;
}
if(cas8 === true){
score += 3;
}
if(cas9 === true){
score += 3;
}
if(cas10 === true){
score += 3;
}
if(brbad1 === true){
score += 4;
}
if(brbad2 === true){
score += 4;
}
if(brbad3 === true){
score += 4;
}
if(brbad4 === true){
score += 4;
}
if(brbad5 === true){
score += 4;
}
if(brbad6 === true){
score += 4;
}
if(brbad7 === true){
score += 4;
}
if(brbad8 === true){
score += 4;
}
if(brbad9 === true){
score += 4;
}
if(brbad10 === true){
score += 4;
}
// CHARACTER SCORE
if(score < 12){
score = "House & Wilson!";
$("#houseimage").show();
}
if(score <= 20){
score = "Sherlock & John!";
$("#sherimage").show();
}
if(score <= 30){
score = "Dean & Cas!";
$("#casimage").show();
}
if(score <= 40){
score = "Walt & Jesse!";
$("#brbadimage").show();
}
}
// SHOW RESULTS
$("#results").click(function(){
$(this).hide();
$progressbar.hide();
$("#startover").show();
calcScore();
$("#score").show();
document.getElementById("score").innerText = 'You Got: ' + score;
});
});
HTML:
<body>
<div class="container box">
<div class="header">
<div class="text-center" id="title"> WHICH TV BROMANCE ARE YOU AND YOUR BFF? </div></div>
<div class="col-sm-11 text-center divprogress">
<div class="text-center">
<progress class="progress progress-striped progress-animated center-block" style="width: 0%, text-align: center" id="progressbar" value="0" max="100"></progress> </div></div>
<br>
<br>
<div class="col-lg-6 text-center">
<button type="button" class="btn btn-secondary btn-lg text-center" id="start">START QUIZ</button></div>
<!-- QUIZ AREA -->
<!-- QUESTION & ANSWERS 1 -->
<div id="content">
<div class="questionarea text-center" id="QA1" data-question"1">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question1">Q1: How did you and your BFF meet?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question1" value="1" id="option1"> At work </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question1" value="2" id="option2"> Living together</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question1" value="3" id="option3"> Under unusual or other circumstances</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question1" value="4" id="option4"> In school</label></div></div>
</div>
<!-- QUESTION & ANSWERS 2 -->
<div class="questionarea text-center" id="QA2" data-question"2">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question2">Q2: How long have you known each other?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question2" value="4" id="option5"> Less than 3 years </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question2" value="2" id="option6"> 4-7 years</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question1" value="3" id="option7"> At least 8 years</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question2" value="1" id="option8"> Over 20 years</label></div></div>
</div>
<!-- QUESTION & ANSWERS 3 -->
<div class="questionarea text-center" id="QA3" data-question"3">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question3">Q3: How would you describe your friendship?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question3" value="3" id="option9"> Deep </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question3" value="2" id="option10"> Amazing</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question1" value="1" id="option11"> Needy</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question3" value="4" id="option12"> Protective</label></div></div>
</div>
<!-- QUESTION & ANSWERS 4 -->
<div class="questionarea text-center" id="QA4" data-question"3">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question4">Q4: What do you do together?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question4" value="4" id="option13"> Business </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question4" value="2" id="option14"> Go out</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question4" value="3" id="option15"> Just hold each other</label> </div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question4" value="1" id="option16"> Play pranks on each other</label></div></div>
</div>
<!-- QUESTION & ANSWERS 5 -->
<div class="questionarea text-center" id="QA5" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question5">Q5: How often do you fight?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question5" value="3" id="option17"> Not much, but when we do, it's a big deal </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question5" value="1" id="option18"> We have lots of harmless tiffs</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question5" value="2" id="option19"> Sometimes</label> </div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question5" value="4" id="option20"> Often and it can get physical</label></div></div>
</div>
<!-- QUESTION & ANSWERS 6 -->
<div class="questionarea text-center" id="QA6" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question6">Q6: How well do you know each other?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question6" value="3" id="option21"> Quite a lot </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question6" value="4" id="option22"> Not much</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question6" value="1" id="option23"> We know every detail of each other's lives</label> </div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question6" value="2" id="option24"> He knows way more about my life than I know about his (or viceversa)</label></div></div>
</div>
<!-- QUESTION & ANSWERS 7 -->
<div class="questionarea text-center" id="QA7" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question7">Q7: Do you celebrate your birthdays together?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question7" value="4" id="option25"> No, but I buy him a great present </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question7" value="2" id="option26"> Of course</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question7" value="1" id="option27"> Often</label> </div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question7" value="3" id="option28"> Only if he's in town at the time</label></div></div>
</div>
<!-- QUESTION & ANSWERS 8 -->
<div class="questionarea text-center" id="QA8" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question8">Q8: How often are you around each other's houses?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question8" value="2" id="option29"> We live together </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question8" value="3" id="option30"> Often</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question8" value="4" id="option31"> Not often</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question8" value="1" id="option32"> All the time</label></div></div>
</div>
<!-- QUESTION & ANSWERS 9 -->
<div class="questionarea text-center" id="QA9" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question9">Q9: How often do you talk about your feelings?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question9" value="3" id="option33"> No need. We can see right through each other </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question9" value="2" id="option33"> Occasionally</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question9" value="4" id="option34"> Rarely</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question9" value="1" id="option35"> Only in a joking manner</label></div></div>
</div>
<!-- QUESTION & ANSWERS 10 -->
<div class="questionarea text-center" id="QA10" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question10">Q10: What do you consider each other as?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question10" value="1" id="option36"> Life partners </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question10" value="2" id="option37"> Best friends</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question10" value="3" id="option38"> Family (brothers)</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question10" value="4" id="option39"> Family (father/son)</label></div></div>
</div>
<!-- ---- -->
<button id="results">View Results</button>
<h2 id='score'></h2>
<div id="images">
<img id="houseimage" src="http://24.media.tumblr.com/tumblr_m70pdclcae1qcy01ao1_500.gif" />
<img id="brbadimage"
src="http://24.media.tumblr.com/c88e253d9ed37f2cf422bf4bef27bcbc/tumblr_n52r45b3YW1qglx18o1_r1_250.gif" />
<img id="sherimage" src="http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=http://mmbiz.qpic.cn/mmbiz/4vhrz0icYkiaUHCPsiaJUKMEsFnUWwluggISyy0iaAaZvhOxcKhdc3XLK8LhSc3q52lOaIvBzsuZP93STzKEyqoYBw/0?wx_fmt=gif" />
<img id="casimage" src="http://66.media.tumblr.com/9c0723fa2ff4054cea2d0a530802fef8/tumblr_inline_mtnsncH2fn1qjt6x6.gif" />
</div>
<div><button id="startover">Start Over</button></div>
</div>
</div>
</body>
CSS:
// HEADER AND BOX
body {
background-image: url("http://wallpoper.com/images/00/40/76/15/gregory-house_00407615.jpg");
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
background-position: fixed;
}
.header {
margin-top: 30px;
}
#title {
font-size: 30px;
text-align: center;
font-family: fantasy, serif;
margin-top: 50px;
margin: 0 auto;
float: none;
}
.box {
width: 900px;
height: 450px;
background-color: #ba348b;
border-radius: 40px;
box-shadow: 4px 4px 10px 4px black;
padding: auto;
overflow: hidden;
text-align: center;
margin: 0 auto;
margin-bottom: 20px;
margin-top: 30px;
float: none;
}
// START QUIZ BUTTON
#start {
background-color: #00c6d2;
border: 2px solid #13281c;
border-radius: 10px;
color: #13281c;
padding: 20px;
width: 200px;
opacity: 1;
margin-top: 110px;
font-size: 20px;
font-family: fantasy, serif;
&:hover {
background-color:
#009ea8;
}
}
.btn-lg {
float: none;
margin: 0 auto;
text-align:center;
margin-top: 70px;
margin-left: 10px;
}
// PROGRESS BAR
.divprogress {
text-align: center;
float: none;
margin: 0 auto;
}
#progressbar {
background-color: blue;
margin: 0 auto;
float: none;
box-shadow: none;
outline: none;
text-align: center;
width: 780px;
margin-left: auto;
margin-right:auto;
margin-top: 20px;
display: none;
}
// QUESTIONS AND ANSWERS
#QA1, #QA2, #QA3, #QA4, #QA5, #QA6, #QA7, #QA8, #QA9, #QA10 {
margin-top: 10px;
font-family: fantasy, serif;
color: #13281c;
display: none;
}
.questionarea {
display: none;
}
.col-lg-6 {
float: none;
margin: 0 auto;
margin-top: -40px;
}
.question1, .question2, .question3, .question4, .question5, .question6, .question7, .question8, .question9, .question10 {
font-size: 18px;
font-family: fantasy, serif;
margin-top: 70px;
margin-bottom: 30px;
}
.btn-primary {
font-size: 14px;
background-color: #ffff32 !important;
color: #13281c !important;
outline: 0 none;
opacity: 1;
border: 0 none;
&:hover{
background-color: #e5e500 !important;
color: black !important;
outline: 0 none;
}
}
// RESULTS BUTTON / TEXT
#results {
padding: 20px;
background-color: #609D57;
border: 3px solid darkgreen;
border-radius: 10px;
display: none;
text-align: center;
font-family: fantasy, serif;
float: center;
margin-top: 90px;
font-size: 18px;
color: #13281c !important;
outline: 0 none;
opacity: 1;
&:hover{
background-color: #568d4e !important;
color: black !important;
outline: 0 none;
}
}
#score {
text-align: center;
font-size: 20px;
font-family: fantasy, serif;
float: center;
color: #920602;
}
#startover{
text-align: center;
font-size: 14px;
font-family: fantasy, serif;
margin-top: 20px;
float: center;
display: none;
background-color: rgba(211,211,211, 0.7);
&:hover {
background-color: rgba(211,211,211, 1);
}
}
// IMAGES
#houseimage, #sherimage, #casimage, #brbadimage {
display: none;
text-align: center;
margin-top: 10px;
}
#houseimage, #sherimage, #brbadimage {
height: 240px;
}

The reason is because the startOver function is hiding all the images.
$("#images").hide();
You need to hide the individual image tags instead of the div with $('#images img')
I added this helper to your code:
function hideImages() {
$('#images img').hide();
}
hideImages();
See the demo here: https://jsbin.com/bezimupihi/edit?html,js,output

Related

JS Event listener not being Invoked after using insertafter

I have two section where the second section is inserted into a div of the first section. This is done so the appropriate section is displayed side by side when any of the item in the first section is clicked.
However the issue that I am seeing is hapenning with the radio change event. The radio change event is not triggering consistently or being called if i use $('.checking-account-options').insertAfter('.offering-container'); (updating the DOM)
I made sure that the radio button change event is called after the DOM is updated but still having issues with firing the radio button event handler. What could be the issue here?
let bankOfferingClick = document.querySelectorAll('#banks .account-offering');
if (bankOfferingClick.length)
bankOfferingClick.forEach(button => button.addEventListener('click', updateDOM));
let radiobuttons = document.querySelectorAll('input[type="radio"]');
radiobuttons.forEach(radiobutton => {
radiobutton.addEventListener('change', updatecheckbox);
});
function updateDOM(event) {
$('.checking-account-options').insertAfter('.offering-container');
}
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
function updatecheckbox(event) {
const target = event.target;
if (target.type === "radio")
for (const radio of radiobuttons) {
if (radio.checked)
target.previousElementSibling?.classList.add('checked');
else
target.previousElementSibling?.classList.remove('checked');
}
}
input [type="radio"] {
display: none;
}
.radio {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
border-radius: 100vmax;
margin-right: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
position: relative;
border: 1px solid black;
background-color: white;
}
.radio-label {
display: flex;
align-items: center;
}
.radiocontainer {
padding-bottom: 1rem;
}
.radiocontainer label.radio-label.checked .radio::before {
content: "";
position: absolute;
width: 0.75rem;
height: 0.75rem;
background-color: black;
border-radius: 100vmax;
}
.hide {
display: none;
}
ul li {
margin-bottom: 1rem;
margin-top: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="banks">
<section class="bank-offering-container">
<div style="display:flex">
<div class="offering-container">
<ul style="list-style: none;">
<li class="checkingsaccount">
<span class="account-offering">
Checkings Account
</span>
</li>
<li class="savingsaccount">
<span class="account-offering">
Savings Account
</span>
</li>
<li class="investments">
<span class="account-offering">
Investments
</span>
</li>
</ul>
</div>
</div>
</section>
<section class="checking-account-options">
<div>
<div class="radiocontainer">
<label for="2" class="radio-label">
<span class="radio"></span>
Used for day to day purposes
</label>
<input type="radio" class="hide" id="2">
</div>
<div class="radiocontainer">
<label for="3" class="radio-label">
<span class="radio"></span>
Used to pay off student loans
</label>
<input type="radio" class="hide" id="3">
</div>
<div class="radiocontainer">
<label for="4" class="radio-label">
<span class="radio"></span>
Used to pay off mortagage
</label>
<input type="radio" class="hide" id="4">
</div>
<div class="radiocontainer">
<label for="5" class="radio-label">
<span class="radio"></span>
Used to pay off auto loan
</label>
<input type="radio" class="hide" id="5">
</div>
</div>
</section>
</body>
<body id="banks">
<section class="bank-offering-container">
<div style="display:flex">
<div class="offering-container">
<ul style="list-style: none;">
<li class="checkingsaccount">
<span class="account-offering">
Checkings Account
</span>
</li>
<li class="savingsaccount">
<span class="account-offering">
Savings Account
</span>
</li>
<li class="investments">
<span class="account-offering">
Investments
</span>
</li>
</ul>
</div>
</div>
</section>
<section class="checking-account-options">
<div>
<div class="radiocontainer">
<label for ="2" class="radio-label">
<span class="radio"></span>
Used for day to day purposes
</label>
<input type="radio" class="hide" id="2">
</div>
<div class="radiocontainer">
<label for ="3" class="radio-label">
<span class="radio"></span>
Used to pay off student loans
</label>
<input type="radio" class="hide" id="3">
</div>
<div class="radiocontainer">
<label for ="4" class="radio-label">
<span class="radio"></span>
Used to pay off mortagage
</label>
<input type="radio" class="hide" id="4">
</div>
<div class="radiocontainer">
<label for ="5" class="radio-label">
<span class="radio"></span>
Used to pay off auto loan
</label>
<input type="radio" class="hide" id="5">
</div>
</div>
</section>
</body>

Uncheck the checked input when clicked on close icon for same label name for both input

So far what I did was when the user clicks the label,the checkbox of that label is checked and the value of the label is appended in another div along with close icon.When we click the close icon or uncheck,the checkbox will be unchecked.But when we have same label name for two checkboxes,on clicking the close icon or unchecking for one,both the checkboxes are unchecked because of the same label as both will be active.I hope you are getting what i am trying to say.Here is the code snippet for you to be more clear.Any help will be appreciated.
var passed_value, data, input_value, checkbox_items;
$('.form-check-label').click(function(e) {
data = $(this).text().trim();
input_value = data.split(' ').join('_');
$(this).prev('input').attr({
'value': input_value,
'id': input_value
});
e.stopImmediatePropagation();
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
passed_value = $(`<div><span>` + data + `</span><i class="fas fa-times"></i></div>`).prop('title', data);
$('.result-text1').append(passed_value).css('cursor', 'default');
} else {
$('.result-text1 span:contains(' + data + ')').parent().remove();
}
})
var active_text;
$('body').on('click', '.result-text1 i', function(e) {
e.stopImmediatePropagation();
$(this).parent('div').remove();
var text_div = $(this).prev().text();
// console.log(text_div);
active_text = $('.form-check-label.active:contains(' + text_div + ')');
if ($(active_text)) {
$(active_text).removeClass('active').prev().prop('checked', false);
}
})
.result-text1 div {
display: grid;
grid-template-columns: min-content min-content;
grid-column-gap: 5px;
}
.result-text1 div span {
color: #1e699b;
padding: 7px;
font-size: 12px;
border: 1px solid #1e699b;
border-radius: 7px;
// margin-right: 7px;
text-overflow: ellipsis;
width: 110px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-align: center;
}
i {
height: 17px;
width: 17px;
background: #eaeaea;
border-radius: 50%;
color: #2d84d7;
display: grid;
justify-content: center;
align-items: center;
font-size: 11px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/cd3112b74c.js" crossorigin="anonymous"></script>
<div class="card">
<article class="card-group-item">
<header class="card-header">
<h6 class="title">pickup time </h6>
</header>
<div class="filter-content">
<div class="card-body">
<form>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
morning
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
afternoon
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
evening
</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
night
</span>
</label>
<!-- form-check.// -->
</form>
</div>
<!-- card-body.// -->
</div>
</article>
<!-- card-group-item.// -->
<article class="card-group-item">
<header class="card-header">
<h6 class="title">drop time </h6>
</header>
<div class="filter-content">
<div class="card-body">
<form>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
morning
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
afternoon </span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
evening
</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
night
</span>
</label>
<!-- form-check.// -->
</form>
</div>
<!-- card-body.// -->
</div>
</article>
<!-- card-group-item.// -->
</div>
<!-- card.// -->
<div class="result-text1"></div>

Use unique id for checkbox and for="id" so that the checkbox works even if the label or span is clicked.
Since the similar property seems to be present multiple times assign them with a significance data-attribute or something.
Please check the code snippet below and leave a comment if your requirement is different.
Some changes I have applied are listed here,
use unique id for checkbox and for="id" for label or span
used data-id="id"(data-attribute) which helps in data manipulation
use let instead of var since they are declared locally instead of globally
use .off() ( i.e. .off('click'). Unbinding events is better
check if the checkbox is checked or not before appending/binding the data in another div element
it's better to call a event after a successful bind of data if data is binding from js eventListener() in this code snippet
$('.form-check-input').off().on('click', function(e) {
let id = $(this).attr('id');
data = $(this).next('span').text().trim();
input_value = data.split(' ').join('_');
// $(this).prev('input').attr({
// 'value': input_value,
// 'id': input_value
// });
//e.stopImmediatePropagation();
$(this).toggleClass('active');
if ($(this).is(':checked')) {
passed_value = $(`<div data-id=${id}><span>` + data +
`</span><i class="fas fa-times btnCross"></i></div>`)
.prop('title',
data);
$('.result-text1').append(passed_value).css('cursor', 'default');
} else {
$(`div[data-id="${id}"]`).remove();
}
eventListener();
});
function eventListener() {
$('.btnCross').off().on('click', function(e) {
// e.stopImmediatePropagation();
let $this = $(this);
let targetEle = $this.parent().attr('data-id');
$this.parent().remove();
$(`#${targetEle}`).prop('checked', false);
//var text_div = $(this).prev().text();
// console.log(text_div);
// active_text = $('.form-check-label.active:contains(' + text_div + ')');
// if ($(active_text)) {
// $(active_text).removeClass('active').prev().prop('checked', false);
// }
})
}
.result-text1 div {
display: grid;
grid-template-columns: min-content min-content;
grid-column-gap: 5px;
}
.result-text1 div span {
color: #1e699b;
padding: 7px;
font-size: 12px;
border: 1px solid #1e699b;
border-radius: 7px;
text-overflow: ellipsis;
width: 110px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-align: center;
}
i {
height: 17px;
width: 17px;
background: #eaeaea;
border-radius: 50%;
color: #2d84d7;
display: grid;
justify-content: center;
align-items: center;
font-size: 11px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/cd3112b74c.js" crossorigin="anonymous"></script>
<div class="card">
<article class="card-group-item">
<header class="card-header">
<h6 class="title">pickup time </h6>
</header>
<div class="filter-content">
<div class="card-body">
<form id="pickupTime">
<label class="form-check">
<input class="form-check-input" id="ptMorning" type="checkbox" value="">
<span for="ptMorning" class="form-check-label">
morning
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" id="ptAfternoon" type="checkbox" value="">
<span for="ptAfternoon" class="form-check-label">
afternoon
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" id="ptEvening" type="checkbox" value="">
<span for="ptEvening" class="form-check-label">
evening
</span>
</label>
<label class="form-check">
<input class="form-check-input" id="ptNight" type="checkbox" value="">
<span for="ptNight" class="form-check-label">
night
</span>
</label>
<!-- form-check.// -->
</form>
</div>
<!-- card-body.// -->
</div>
</article>
<!-- card-group-item.// -->
<article class="card-group-item">
<header class="card-header">
<h6 class="title">drop time </h6>
</header>
<div class="filter-content">
<div class="card-body">
<form id="dropTime">
<label class="form-check">
<input class="form-check-input" id="dtMorning" type="checkbox" value="">
<span for="dtMorning" class="form-check-label">
morning
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" id="dtAfternoon" type="checkbox" value="">
<span for="dtAfternoon" class="form-check-label">
afternoon </span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" id="dtEvening" type="checkbox" value="">
<span for="dtEvening" class="form-check-label">
evening
</span>
</label>
<label class="form-check">
<input class="form-check-input" id="dtNight" type="checkbox" value="">
<span for="dtNight" class="form-check-label">
night
</span>
</label>
<!-- form-check.// -->
</form>
</div>
<!-- card-body.// -->
</div>
</article>
<!-- card-group-item.// -->
</div>
<!-- card.// -->
<div class="result-text1"></div>

Have a look at the JS fiddle: https://jsfiddle.net/0e4756ub/2/
I have given id & value to checkbox at the time of designing only and using the same at the time of clicking on close icon.
JS:
var passed_value, data, input_value, checkbox_items;
$('.form-check-label').click(function(e) {
data = $(this).text().trim();
input_value = data.split(' ').join('_');
var checkbox_id = $(this).prev('input').attr('id');
e.stopImmediatePropagation();
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
passed_value = $('<div><span data-id="'+ checkbox_id +'">' + data + '</span><i class="fas fa-times"></i></div>').prop('title', data);
$('.result-text1').append(passed_value).css('cursor', 'default');
} else {
$('.result-text1 span:contains(' + data + ')').parent().remove();
}
});
$('body').on('click', '.result-text1 i', function(e) {
e.stopImmediatePropagation();
$(this).parent('div').remove();
var checkbox_id = $(this).prev().attr('data-id');
if ($('#'+ checkbox_id)) {
$('#'+ checkbox_id).prop('checked', false);
$('#'+ checkbox_id).next('span').removeClass('active').prev();
}
});
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/cd3112b74c.js" crossorigin="anonymous"></script>
<div class="card">
<article class="card-group-item">
<header class="card-header">
<h6 class="title">pickup time </h6>
</header>
<div class="filter-content">
<div class="card-body">
<form>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="morning-pickup" id="morning-pickup">
<span class="form-check-label">
morning
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="afternoon-pickup" id="afternoon-pickup">
<span class="form-check-label">
afternoon
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="evening-pickup" id="evening-pickup">
<span class="form-check-label">
evening
</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="night-pickup" id="night-pickup">
<span class="form-check-label">
night
</span>
</label>
<!-- form-check.// -->
</form>
</div>
<!-- card-body.// -->
</div>
</article>
<!-- card-group-item.// -->
<article class="card-group-item">
<header class="card-header">
<h6 class="title">drop time </h6>
</header>
<div class="filter-content">
<div class="card-body">
<form>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="morning-drop" id="morning-drop">
<span class="form-check-label">
morning
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="afternoon-drop" id="afternoon-drop">
<span class="form-check-label">
afternoon </span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="evening-drop" id="evening-drop">
<span class="form-check-label">
evening
</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="night-drop" id="night-drop">
<span class="form-check-label">
night
</span>
</label>
<!-- form-check.// -->
</form>
</div>
<!-- card-body.// -->
</div>
</article>
<!-- card-group-item.// -->
</div>
<!-- card.// -->
<div class="result-text1"></div>
CSS:
.result-text1 div {
display: grid;
grid-template-columns: min-content min-content;
grid-column-gap: 5px;
}
.result-text1 div span {
color: #1e699b;
padding: 7px;
font-size: 12px;
border: 1px solid #1e699b;
border-radius: 7px;
// margin-right: 7px;
text-overflow: ellipsis;
width: 110px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-align: center;
}
i {
height: 17px;
width: 17px;
background: #eaeaea;
border-radius: 50%;
color: #2d84d7;
display: grid;
justify-content: center;
align-items: center;
font-size: 11px;
}

How to add more input names in js?

How can you add another name to the input names ?
var checked = document.querySelector("input[name = 'variable']:checked")
I have another input name called 'sub'. But I don't know how you can add this in the code.
(I am in the learning process of js)
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="row"> <h3>Moths are a member of what order?</h3></div>
<div class="row">
<input name="variable" type="radio" value="0" />Octagon <span class="explanation" id="demo" style="color:red"></span></div>
<div> </div>
<div class="row">
<input name="variable" type="radio" value="0" />Leprosy <span class="explanation" id="demo2" style="color:red"></span></div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera <span class="explanation" id="demo3" style="color:green"></span></div>
<div class="row"> <h3>Question 2</h3></div>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1 <span class="explanation" id="demo4"></span> </div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3</div>
and the script:
function myFunction() {
var explanations = document.querySelectorAll(".explanation");
for(var x = 0; x < explanations.length; x++) {
explanations[x].innerHTML = "";
}
var checked = document.querySelector("input[name=variable]:checked, input[name=sub]:checked")
var value = checked.parentNode.lastChild.id;
var answer;
switch (value) {
case 'demo':
answer = "An octagon is an object with 8 sides to it";
break;
case 'demo2':
answer = "Leprosy is a chronic infection";
break;
case 'demo3':
answer = "Yes ! this is correct";
break;
case 'demo4':
answer = "hjhjhjhjct";
break;
}
checked.parentNode.lastChild.innerHTML = answer;
}

there are some points to mention:
First.
<div class="row">
<input name="variable" type="radio" value="0" />Octagon <span class="explanation" id="demo" style="color:red"></span></div>
<div> </div> <-- this is will become your .lastChild so i think you not expect this <div> as .lastChild so delete that tag.
Second use querySelectorAll for multiple selection, so this is wrong:
var checked = document.querySelector("input[name=variable]:checked, input[name=sub]:checked")
Third multiple select returns mutiple result, i.e. array of result, so use array to result handling.
Below is edited code, so reedit it for your purpose:
<style>
.quizbox {
width: 58%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
border-width: 5px;
border-color: #00A7AE;
margin-top: 7%;
text-align: center;
position: relative;
background: #73B7DB;
}
.row {
text-align: left;
color: white;
margin-left: 10%;
}
span#demo, #demo2, #demo3, #demo4, #demo5, #demo6, #demo7, #demo8, #demo9 {
display: inline;
margin-right: 30%;
float:right;
width:50%;
}
input[type="submit"]
{
padding: 10px 15px 11px !important;
font-size: 18px !important;
background-color: #57d6c7;
font-weight: bold;
text-shadow: 1px 1px #57D6C7;
color: #ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #57D6C7;
cursor: pointer;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
</style>
<div class="quizbox">
<!-- open main div -->
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="row"><h3>Moths are a member of what order?</h3></div>
<div class="row">
<input name="variable" type="radio" value="0" />
Octagon <span class="explanation" id="demo1" style="color:red"></span></div>
<div class="row">
<input name="variable" type="radio" value="0" />
Leprosy <span class="explanation" id="demo2" style="color:red"></span></div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera <span class="explanation" id="demo3" style="color:green"></span></div>
<div class="row"> <h3>Question 2</h3></div>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1 <span class="explanation" id="demo4"></span></div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2 <span class="explanation" id="demo5"></span></div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3 <span class="explanation" id="demo6"></span></div>
<div class="row"><h3>Question 3</h3></div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 1 <span class="explanation" id="demo7"></span></div>
<div class="row">
<input name="con" type="radio" value="33" />Answer 2 <span class="explanation" id="demo8"></span></div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 3 <span class="explanation" id="demo9"></span></div>
<p> <input type="submit" onclick="myFunction()" value="Check" /> </p>
</form>
</div>
<!-- close quizbox div -->
<script>
document.getElementById("form1").onsubmit = function(e) {
e.preventDefault();
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
function myFunction() {
var explanations = document.querySelectorAll(".explanation");
for(var x = 0; x < explanations.length; x++) {
explanations[x].innerHTML = "";
}
var checked = document.querySelectorAll("input[name=variable]:checked, input[name=sub]:checked, input[name=con]:checked")
for(var answ = 0 ; answ < checked.length; answ++){
var value = checked[answ].parentNode.lastChild.id;
var answer;
switch (value) {
case 'demo':
answer = "An octagon is an object with 8 sides to it";
break;
case 'demo2':
answer = "Leprosy is a chronic infection";
break;
case 'demo3':
answer = "Yes ! this is correct";
break;
case 'demo4':
answer = "demo4";
break;
case 'demo5':
answer = "demo5";
break;
case 'demo6':
answer = "demo6";
break;
case 'demo7':
answer = "demo7";
break;
case 'demo8':
answer = "demo8";
break;
case 'demo9':
answer = "demo9";
break;
}
checked[answ].parentNode.lastChild.innerHTML = answer;
}
}
</script>
<div> </div>

How to put text next to the answers in quiz, after clicking the submit button

The idea is that when somebody click on submit and for example had question 1 wrong, there will be some info after the wrong answer like: ... is a mammal species.
So far I tried things and looked it up, I can't really get it to work.
<style>
.quizbox {
width: 58%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
margin-top: 7%;
text-align: center;
position: relative;
}
.quizstyle {
padding-right: 50%;
}
.row {
text-align: left;
margin-left: 10%;
}
</style>
<div class="quizbox">
<!-- open main div -->
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="quizstyle">
<h3>Moths are a member of what order?</h3>
<div class="row">
<input name="variable" type="radio" value="0" />Octagon</div>
<div class="row">
<input name="variable" type="radio" value="0" />Leprosy</div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera</div>
<h3>Question 2</h3>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3</div>
<h3>Question 3</h3>
<div class="row">
<input name="con" type="radio" value="0" />Answer 1</div>
<div class="row">
<input name="con" type="radio" value="33" />Answer 2</div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 3</div>
</div>
<input type="submit" value="Submit" />
</form>Your grade is: <span id="grade">__</span>
<p id="grade2"></p>
</div>
<!-- close main div -->
<script>
document.getElementById("form1").onsubmit = function() {
variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
con = parseInt(document.querySelector('input[name = "con"]:checked').value);
result = variable + sub + con;
document.getElementById("grade").innerHTML = result;
var result2 = "";
if (result == 0) {
result2 = "I don't think you studied."
};
if (result == 33) {
result2 = "You need to spend more time. Try again."
};
if (result == 66) {
result2 = "I think you could do better. Try again."
};
if (result == 99) {
result2 = "Excellent!"
};
document.getElementById("grade2").innerHTML = result2;
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
</script>

Please find below solution. I hope it will works for you.
document.getElementById("form1").onsubmit = function(e) {
e.preventDefault();
variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
con = parseInt(document.querySelector('input[name = "con"]:checked').value);
result = variable + sub + con;
document.getElementById("grade").innerHTML = result;
var result2 = "";
if (result == 0) {
result2 = "I don't think you studied."
};
if (result == 33) {
result2 = "You need to spend more time. Try again."
};
if (result == 66) {
result2 = "I think you could do better. Try again."
};
if (result == 99) {
result2 = "Excellent!"
};
document.getElementById("grade2").innerHTML = result2;
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
<style>
.quizbox {
width: 58%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
margin-top: 7%;
text-align: center;
position: relative;
}
.quizstyle {
padding-right: 50%;
}
.row {
text-align: left;
margin-left: 10%;
}
</style>
<div class="quizbox">
<!-- open main div -->
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="quizstyle">
<h3>Moths are a member of what order?</h3>
<div class="row">
<input name="variable" type="radio" value="0" />Octagon</div>
<div class="row">
<input name="variable" type="radio" value="0" />Leprosy</div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera</div>
<h3>Question 2</h3>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3</div>
<h3>Question 3</h3>
<div class="row">
<input name="con" type="radio" value="0" />Answer 1</div>
<div class="row">
<input name="con" type="radio" value="33" />Answer 2</div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 3</div>
</div>
<input type="submit" value="Submit" />
</form>Your grade is: <span id="grade">__</span>
<p id="grade2"></p>
</div>
<!-- close main div -->

RadioButton always returning false - JavaScript

I have a HTML page that have many section with inputs consisting of RadioButtons and CheckBox. The first one of them is like this:
<div style="margin-top: 30px; height: 270px;">
<input id="Answer1" type="radio" name="Answers" title="True" onclick="setAnswered();"/>True<br/>
<input type="radio" name="Answers" title="False" onclick="setAnswered();" />False
</div>
<div id="replaceAble1_a" style="display: none;">Answer1</div>
After the final input I am looking for each input and investigating that the correct answers are checked. Here is the part of script that is doing this job:
var ansList = document.getElementById(thisFrame + "_a").innerHTML.split(",");
for (var k = 0; k < ansList.length; k++) {
var ele = document.getElementById(ansList[k]);
result = result & ele.checked ;
}
where thisFrame for this iteration is replaceAble1. Upon debugging it is clear that I am getting the correct element id in ansList[k] i.e. Answer1.
Now the problem is, every time, whether the Answer1 is checked or not ele.checked is returning false.
What could be the reason?
Update:
I think it would better to put complete code. So here it is:
<div id="replaceAble1">
<span style="font-size: 14pt ;margin-top: 5px;">Q
<span id ="question1">Do you live in Pakistan?</span>
</span>
<div style="margin-top: 30px; height: 270px;">
<input id="Answer1" type="radio" name="Answers" title="True" onclick="setAnswered();"/>True<br/>
<input type="radio" name="Answers" title="False" onclick="setAnswered();" />False
</div>
<div id="replaceAble1_a" style="display: none;">Answer1</div>
<div id="replaceAble1_n" style="display: none;">null</div>
</div>
<div id="replaceAble2" style="display: none;">
<span style="font-size: 14pt ;margin-top: 5px;">Q.
<span id ="question2">Do you go for cycling daily?</span>
</span>
<div style="margin-top: 30px; height: 270px;">
<input type="radio" name="Answers" title="True" onclick="setAnswered();" />True<br/>
<input id="Answer2" type="radio" name="Answers" title="False" onclick="setAnswered();" />False
</div>
<div id="replaceAble2_a" style="display: none;">Answer2</div>
<div id="replaceAble2_n" style="display: none;">null</div>
</div>
<div id="replaceAble3" style="display: none;">
<span style="font-size: 14pt ;margin-top: 5px;">Q
<span id ="question3">When Do you Sleep?</span>
</span>
<div style="margin-top: 30px; height: 270px;">
<input id="notAnswer1" type="checkbox" name="Answers" title="True" onclick="setAnswered();"/>Morning<br/>
<input id="notAnswer2" type="checkbox" name="Answers" title="False" onclick="setAnswered();" />Evening<br/>
<input id="Answer3" type="checkbox" name="Answers" title="False" onclick="setAnswered();" />Night
</div>
<div id="replaceAble3_a" style="display: none;">Answer3</div>
<div id="replaceAble3_n" style="display: none;">notAnswer1,notAnswer2</div>
</div>
<div id="replaceAble4" style="display: none;">
<span style="font-size: 14pt ;margin-top: 5px;">Q
<span id ="question4">What Do you Eat?</span>
</span>
<div style="margin-top: 30px; height: 270px;">
<input id="Answer4" type="checkbox" name="Answers" title="False" onclick="setAnswered();" />Launch<br/>
<input id="Answer5" type="checkbox" name="Answers" title="False" onclick="setAnswered();" />Break Fast<br/>
<input id="Answer6" type="checkbox" name="Answers" title="False" onclick="setAnswered();" />Dinner<br/>
</div>
<div id="replaceAble4_a" style="display: none;">Answer4,Answer5,Answer6</div>
<div id="replaceAble4_n" style="display: none;">null</div>
</div>
And the script is:
var i = 0;
var answered = false;
var score = 0;
var unitScore = 5;
var totalScore = 20;
var frameList = ["replaceAble1", "replaceAble2", "replaceAble3", "replaceAble4"];
function setAnswered() {
answered = true;
}
function displayAnswer(isTimeUp) {
var Message;
var j;
if (isTimeUp) {
Message = "Times Up";
} else {
Message = "Quiz End";
}
for (j = 0; j < frameList.length; j++) {
var result = true;
var thisFrame = frameList[j];
var ansList = document.getElementById(thisFrame + "_a").innerHTML.split(",");
for (var k = 0; k < ansList.length; k++) {
var ele = document.getElementById(ansList[k]);
result = result & ele.checked ;
}
ansList = document.getElementById(thisFrame + "_n").innerHTML.split(",");
for (var k = 0; k < ansList.length; k++) {
if (ansList[k] !== "null")
result = result & (!document.getElementById(ansList[k]).checked);
}
if (result) {
score = Number(score) + Number(unitScore);
}
}
document.getElementById("QuestionPan").style.display = "none";
document.getElementById("resultPan").style.display = "block";
document.getElementById("message").innerHTML = Message;
document.getElementById("totalMarks").innerHTML = totalScore;
document.getElementById("score").innerHTML = score;
var timetaken = count - document.getElementById("time").innerHTML;
document.getElementById("timetaken").innerHTML = timetaken + " minutes";
}
function submition() {
if (!answered) {
alert("Please select at least one Answer for this question.");
return;
}
if (i === (frameList.length - 1)) {
displayAnswer(false);
return;
}
document.getElementById(frameList[i++]).style.display = "none";
document.getElementById(frameList[i]).style.display = "block";
document.getElementById("counter").innerHTML = (Number(i) + 1) + '/' + frameList.length;
answered = false;
}
Only the first answer i.e. Answer1 is causing this problem. Every thing else is working fine.

You probably want to use the boolean && operator, not the bitwise & operator.
result = result && ele.checked;
This also depends on the previous value of result. I'm not entirely sure this is your problem at this stage.
Update
I can't reproduce the problem. See http://jsfiddle.net/QA26Q/
My only other thought is that you have multiple radio buttons with the same ID as shown in this example - http://jsfiddle.net/QA26Q/1/.

Got the problem. The problem was with HTML not the JavaScript. I have by mistake set the name field of all inputs same i.e. Answer. Hence all the radio button in all replaceable divs were belonging to same group. So when I set the Answer2 of replaceable2 the radio button of replaceable1 is reset. Being invisible I was't able to track this bug. So simply I changed the html to
<div id="replaceAble1">
<span style="font-size: 14pt ;margin-top: 5px;">Q
<span id ="question1">Do you live in Pakistan?</span>
</span>
<div style="margin-top: 30px; height: 270px;">
<input id="Answer1" type="radio" name="Answers1" title="True" onclick="setAnswered();"/>True<br/>
<input type="radio" name="Answers1" title="False" onclick="setAnswered();" />False
</div>
<div id="replaceAble1_a" style="display: none;">Answer1</div>
<div id="replaceAble1_n" style="display: none;">null</div>
</div>
<div id="replaceAble2" style="display: none;">
<span style="font-size: 14pt ;margin-top: 5px;">Q.
<span id ="question2">Do you go for cycling daily?</span>
</span>
<div style="margin-top: 30px; height: 270px;">
<input type="radio" name="Answers2" title="True" onclick="setAnswered();" />True<br/>
<input id="Answer2" type="radio" name="Answers2" title="False" onclick="setAnswered();" />False
</div>
<div id="replaceAble2_a" style="display: none;">Answer2</div>
<div id="replaceAble2_n" style="display: none;">null</div>
</div>
<div id="replaceAble3" style="display: none;">
<span style="font-size: 14pt ;margin-top: 5px;">Q
<span id ="question3">When Do you Sleep?</span>
</span>
<div style="margin-top: 30px; height: 270px;">
<input id="notAnswer1" type="checkbox" name="Answers3" title="True" onclick="setAnswered();"/>Morning<br/>
<input id="notAnswer2" type="checkbox" name="Answers3" title="False" onclick="setAnswered();" />Evening<br/>
<input id="Answer3" type="checkbox" name="Answers3" title="False" onclick="setAnswered();" />Night
</div>
<div id="replaceAble3_a" style="display: none;">Answer3</div>
<div id="replaceAble3_n" style="display: none;">notAnswer1,notAnswer2</div>
</div>
<div id="replaceAble4" style="display: none;">
<span style="font-size: 14pt ;margin-top: 5px;">Q
<span id ="question4">What Do you Eat?</span>
</span>
<div style="margin-top: 30px; height: 270px;">
<input id="Answer4" type="checkbox" name="Answers4" title="False" onclick="setAnswered();" />Launch<br/>
<input id="Answer5" type="checkbox" name="Answers4" title="False" onclick="setAnswered();" />Break Fast<br/>
<input id="Answer6" type="checkbox" name="Answers4" title="False" onclick="setAnswered();" />Dinner<br/>
</div>
<div id="replaceAble4_a" style="display: none;">Answer4,Answer5,Answer6</div>
<div id="replaceAble4_n" style="display: none;">null</div>
And it worked properly.

Develop Reference

JavaScript is the programming language of the Web.

Images don't show up in quiz results after start over button - javascript

Related

JS Event listener not being Invoked after using insertafter

Uncheck the checked input when clicked on close icon for same label name for both input

How to add more input names in js?

How to put text next to the answers in quiz, after clicking the submit button

RadioButton always returning false - JavaScript

Categories

Resources