I'm trying to make a score base quiz where it shows how much score you get when finished e.g. out of 8 and the answers you got incorrect. I have the score system out of the way, just not the validation
HTML
<div class="quiz">
1) What noise does a dog make?</div>
<div class="values">
<input type="radio" value="0" id="q1" name="q1" onclick="question('jq1',this.value)">a) Cluck<br>
<input type="radio" value="0" id="q1" name="q1" onclick="question('jq1',this.value)">b) Meow<br>
<input type="radio" value="0" id="q1" name="q1" onclick="question('jq1',this.value)">c) Moo<br>
<input type="radio" value="1" id="q1" name="q1" onclick="question('jq1',this.value)">d) Woof</div><br>
<input type="hidden" name="jq1" id="jq1" />
<div class="quiz">
2) What noise does a cat make?</div>
<div class="values">
<input type="radio" value="1" id="q2" name="q2" onclick="question('jq2',this.value)">a) Meow<br>
<input type="radio" value="0" id="q2" name="q2" onclick="question('jq2',this.value)">b) Cluck<br>
<input type="radio" value="0" id="q2" name="q2" onclick="question('jq2',this.value)">c) Woof<br>
<input type="radio" value="0" id="q2" name="q2" onclick="question('jq2',this.value)">d) Moo</div><br>
<input type="hidden" name="jq2" id="jq2" />
(sorry for inappropriate questions, they're just there as placeholders :D)
JavaScript
function question(ref,val) {
var x = document.getElementById(ref);
x.value = val;
}
function result() {
var score = 0;
var x = document.getElementById('jq1');
score = eval (score) + eval(x.value);
var x = document.getElementById('jq2');
score = eval (score) + eval(x.value);
alert("You scored: "+score +" out of 2!");
}
I'd like a new line underneath the current one in the alert box saying "Questions 1, 2, 3 were incorrect". Just very unsure on how to do this and would like someone's help.
Thanks very much!
A more object oriented answer
DEMO: http://jsfiddle.net/Victornpb/3cwzndp8/1/
var q = [
{
question:"What noise does a dog make?",
options:["Meow", "Cluck","Woof","Moo"],
answers: [0,0,1,0]
},
{
question:"What noise does a cat make?",
options:["Meow", "Cluck","Woof","Moo"],
answers: [1,0,0,0]
}
];
var questionary = generateQuestionary(q);
quizBody.appendChild(questionary);
function generateQuestionary(obj){
var questionary = tag("div",{className:"questionary"});
for(var i=0; i<obj.length; i++){
questionary.appendChild(generateQuestionHtml(obj[i], i));
}
return questionary;
}
function generateQuestionHtml(obj, n){
var answers = tag("div",{className:"answers"});
for(var i=0; i<obj.options.length; i++){
answers.appendChild(
tag("label",{},
tag("input",{type:"radio", name:"q"+n, value:obj.answers[i],onclick:ck} ),
tag("span",{}, obj.options[i]),
tag("br")
)
);
}
return tag("div",{className:"quiz"},
tag("div",{className:"question"}, obj.question),
answers,
tag("div",{className:"info"})
);
}
function ck(e){
console.log(this);
var infoBox = this.parentElement.parentElement.parentElement.getElementsByClassName("info")[0];
if(this.value==1){
infoBox.innerHTML = "Correct!";
infoBox.classList.remove("wrong");
}
else{
infoBox.innerHTML = "Incorrect answer :(";
infoBox.classList.add("wrong");
}
}
I used a utility function to generate the DOM Elements (the tag() function)
https://gist.github.com/victornpb/11201998
Assuming you want a rudimentary, client-side system, I would suggest declaring an object that holds the answers when the page loads, with the name of each group of choices as the key, and the correct answers being the values.
Say that question 1, labeled "q1", has 3 choices, the answer being the first.
var answers = {q1:0, q2:3};
//The key "q1" gets the value 0, while "q2" will get 3 (or any arbitrary value you want)
Now you can say
if(answers["q1"] != document.forms["formNameHere"].elements["q1"].value)
alert("Everything is awful, you got question one wrong");
You can iterate through each question, checking if the answer is correct, and assembling a string of the wrong answers, which you can display through your alert on a new line.
It's not clear what you want to accomplish.
eval is totally unnecessary here, and shouldn't be used.
window.onload = function() {
check.onclick = result;
}
function result() {
var score = 0;
score += parseInt(getSelectedRadioValue("q1")) || 0;
score += parseInt(getSelectedRadioValue("q2")) || 0;
alert("You scored: " + score + " out of 2!");
}
function getSelectedRadioValue(name) {
var radios = document.getElementsByName(name);
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
return radios[i].value;
}
}
}
<div class="quiz">
1) What noise does a dog make?</div>
<div class="answers">
<label>
<input type="radio" value="0" name="q1">a) Meow</label>
<br>
<label>
<input type="radio" value="0" name="q1">b) Cluck</label>
<br>
<label>
<input type="radio" value="1" name="q1">c) Woof</label>
<br>
<label>
<input type="radio" value="0" name="q1">d) Moo</label>
<br>
</div>
<br>
<input type="hidden" name="jq1" id="jq1" />
<div class="quiz">
2) What noise does a cat make?</div>
<div class="answers">
<label>
<input type="radio" value="1" name="q2">a) Meow</label>
<br>
<label>
<input type="radio" value="0" name="q2">b) Cluck</label>
<br>
<label>
<input type="radio" value="0" name="q2">c) Woof</label>
<br>
<label>
<input type="radio" value="0" name="q2">d) Moo</label>
<br>
</div>
<br>
<input type="hidden" name="jq2" id="jq2" />
<input type="button" id="check" value="I'm done">
Demo:
https://quiz-using-javascript.web.app/
Source Code:
https://github.com/mhsunny/JavaScript-Quiz
This is the project to build a quiz using JavaScript. You can find how to check the answer of questions using javascript forEach() and using setInterval and clearInteval method.
app.js
app.js
const correctAnswers = ['B', 'B', 'B', 'B'];
const form = document.querySelector('.quiz-form');
const result = document.querySelector('.result');
form.addEventListener('submit', e =>{
e.preventDefault();
let score = 0;
const userAnswer = [form.q1.value, form.q2.value, form.q3.value, form.q4.value]
//check answers
userAnswer.forEach((answer, index) =>{
if(answer === correctAnswers[index]){
score +=25;
}
// console.log(score);
//show result on page
});
scrollTo(0, 0);
result.classList.remove('d-none');
let output = 0;
const timer = setInterval(()=>{
result.querySelector('span').textContent = `${output}%`;
if(output === score){
clearInterval(timer);
}else{
output++;
}
}, 10)
})
// let i = 0;
// const timer = setInterval(()=>{
// console.log("hello")
// i++;
// if(i == 5){
// clearInterval(timer);
// }
// }, 1000)
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> JavaScript Quiz</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- top section -->
<div class="intro py-3 bg-white text-center">
<div class="container">
<h2 class="text-primary display-3 my-4"> Quiz using Javascript</h2>
</div>
</div>
<!-- result section -->
<div class="result py-4 d-none bg-light text-center">
<div class="container lead">
<p>You are <span class="text-primary display-4 p-3">0%</span> ninja</p>
</div>
</div>
<!-- quiz section -->
<div class="quiz py-4 bg-primary">
<div class="container">
<h2 class="my-5 text-white">On with the questions...</h2>
<form class="quiz-form text-light">
<div class="my-5">
<p class="lead font-weight-normal">1. How do you give a ninja directions?</p>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q1" value="A" checked>
<label class="form-check-label">Show them a map</label>
</div>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q1" value="B">
<label class="form-check-label">Don't worry, the ninja will find you</label>
</div>
</div>
<div class="my-5">
<p class="lead font-weight-normal">2. If a ninja has 3 apples, then gives one to Mario & one to Yoshi, how many apples does the ninja have left?</p>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q2" value="A" checked>
<label class="form-check-label">1 apple</label>
</div>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q2" value="B">
<label class="form-check-label">3 apples, and two corpses</label>
</div>
</div>
<div class="my-5">
<p class="lead font-weight-normal">3. How do you know when you've met a ninja?</p>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q3" value="A" checked>
<label class="form-check-label">You'll recognize the outfit</label>
</div>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q3" value="B">
<label class="form-check-label">The grim reaper will tell you</label>
</div>
</div>
<div class="my-5">
<p class="lead font-weight-normal">4. What's a ninja's favourite array method?</p>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q4" value="A" checked>
<label class="form-check-label">forEach()</label>
</div>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q4" value="B">
<label class="form-check-label">slice()</label>
</div>
</div>
<div class="text-center">
<input type="submit" class="btn btn-light">
</div>
</form>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Related
I have a short survey questions with answer YES/ NO
How can I get the total number of YES when submit button is clicked?
I will need to display certain images later according to the number of YES
<form>
<div class="field">
<label class="label">This is question number 1</label>
<div class="control">
<label class="radio">
<input type="radio" name="question1" value="1">
Yes
</label>
<label class="radio">
<input type="radio" name="question1" value="0">
No
</label>
</div>
</div>
<div class="field">
<label class="label">This is question number 2</label>
<div class="control">
<label class="radio">
<input type="radio" name="question2" value="1">
Yes
</label>
<label class="radio">
<input type="radio" name="question2" value="0">
No
</label>
</div>
</div>
<div class="field">
<label class="label">This is question number 3</label>
<div class="control">
<label class="radio">
<input type="radio" name="question3" value="1">
Yes
</label>
<label class="radio">
<input type="radio" name="question3" value="0">
No
</label>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<div class="button is-link" onclick="countYes()">Submit</div>
</div>
<div class="control">
<button class="button is-link is-light">Cancel</button>
</div>
</div>
</form>
<script>
function countYes() {
totalVal = 0;
for(var y=0; y<3; y++)
{
var questionNo = document.getElementsByName("question" + y);
for (i=0; i<questionNo.length; i++)
{
if (document.forms.question[i].checked==true)
{
totalVal = totalVal + parseInt(document.forms.question[i].value);
console.log(totalVal);
}
}
}
}
</script>
I have a short survey questions with answer YES/ NO
How can I get the total number of YES when submit button is clicked?
I will need to display certain images later according to the number of YES
I am trying to iterate through an image array, displaying each image individually and using a button to move onto the next. However, when the button is clicked it moves onto the next image, but after the second image, it does not move onto the 3rd etc Can anyone find where the loop is getting stuck?
function changeImage() {
var imageArray = ["/Users/rate/images/images/practice/sun1.jpg", "/Users/rate/images/images/practice/sun2.jpg", "/Users/rate/images/images/practice/sun3.jpg", "/Users/rate/images/images/practice/sun4.jpg"]
var currentImage = 0;
currentImage += 1;
if (currentImage >= imageArray.length) {
currentImage = 0;
}
document.getElementById("mainImage").src = imageArray[currentImage]
}
<!DOCTYPE html>
<html>
<head>
<title> App Icons? </title>
<link rel="stylesheet" type="text/css" href="/Users/Website/css/mainstyle.css">
<script type="text/javascript" src="/Users/rate/js/main.js"></script>
</head>
<body class="body">
<div>
<div>
<hr>
<div class=topbar>
<h1> Do you find this App Icon aesthically pleasing</h1>
</div>
<hr>
<div id=displayedImage> </div>
<img src="/Users/rate/images/images/practice/sun1.jpg" id="mainImage" />
<div id=answer>
<label> Strongly Agree </label>
<label><input type="radio" name="answer" value="1" required><span>1</span></label>
<label><input type="radio" name="answer" value="2" required><span>2</span></label>
<label><input type="radio" name="answer" value="3" required><span>3</span></label>
<label><input type="radio" name="answer" value="4" required><span>4</span></label>
<label><input type="radio" name="answer" value="5" required><span>5</span></label>
<label> Strongly disagree</label>
<hr>
</div>
<input type="button" onclick="changeImage()" value="I am complete">
First of all, scope. Your currentImage should be declared globally because otherwise it will always start at 0. Second, the index of the last element in an array is equal to the array length minus 1, so you need to check currentImage against imageArray.length - 1:
var currentImage = 0;
function changeImage() {
var imageArray = ["/Users/rate/images/images/practice/sun1.jpg", "/Users/rate/images/images/practice/sun2.jpg", "/Users/rate/images/images/practice/sun3.jpg", "/Users/rate/images/images/practice/sun4.jpg"]
if (currentImage >= imageArray.length - 1) {
currentImage = 0;
} else {
currentImage += 1;
}
document.getElementById("mainImage").src = imageArray[currentImage]
console.log(currentImage);
}
<div>
<div>
<hr>
<div class=topbar>
<h1> Do you find this App Icon aesthically pleasing</h1>
</div>
<hr>
<div id=displayedImage> </div>
<img src="/Users/rate/images/images/practice/sun1.jpg" id="mainImage" />
<div id=answer>
<label> Strongly Agree </label>
<label><input type="radio" name="answer" value="1" required><span>1</span></label>
<label><input type="radio" name="answer" value="2" required><span>2</span></label>
<label><input type="radio" name="answer" value="3" required><span>3</span></label>
<label><input type="radio" name="answer" value="4" required><span>4</span></label>
<label><input type="radio" name="answer" value="5" required><span>5</span></label>
<label> Strongly disagree</label>
<hr>
</div>
<input type="button" onclick="changeImage()" value="I am complete">
The console.log(score) won't print to the console. I have tried to place it outside the form tag and everywhere else but still nothing prints
const correctAnswers = ['B', 'B', 'B', 'B'];
const form = document.querySelector('.quiz-form');
form.addEventListener('submit', e => {
e.preventDefault();
let score = 0;
const userAnswers = [form.q1.value, form.q2.value, form.q3.value, form.q4.value];
//check answers
userAnswers.forEach((answer, index) => {
if (answer === correctAnswers[index]) {
score += 25;
}
});
console.log(score);
});
<form class="quiz-form text-light">
<div class="my-5">
<p class="lead font-weight-normal">1.How do you give a ninja directions?</p>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q1" value="A" checked>
<label class="form-check-label">Show them a map</label>
</div>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q1" value="B">
<label class="form-check-label">A ninja will find you</label>
</div>
</div>
<!--second-->
<div class="my-5">
<p class="lead font-weight-normal">2.If a ninja has three apples and give one away, how many does he have?</p>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q2" value="A" checked>
<label class="form-check-label">one apple</label>
</div>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q2" value="B">
<label class="form-check-label">two apples</label>
</div>
</div>
<!--end of second-->
You have a "submit" listener, so you need a "submit" event to trigger it (such as from <input type="submit" />).
In the sample code, since there are no q3 and q4, I commented them out from the userAnswers array.
Edited:
If you want to log the score right away as well as whenever the form is submitted, you can just name the function -- here I named it printScore -- and invoke it by name in both situations.
const correctAnswers = ['B', 'B', 'B', 'B'];
const form = document.querySelector('.quiz-form');
form.addEventListener('submit', printScore); // Calls printScore when form is submitted
printScore(); // Calls printScore once immediately
function printScore(e){
// Skips the call to preventDefault for the initial call
if(e){ e.preventDefault(); }
let score = 0;
const userAnswers = [form.q1.value, form.q2.value //, form.q3.value, form.q4.value
];
//check answers
userAnswers.forEach((answer, index) => {
if (answer === correctAnswers[index]) {
score += 25;
}
});
// Helps make sure the browser will log something even if it's `0`
let scoreString = "" + score;
console.log("current score: " + scoreString);
};
<form class="quiz-form text-light">
<div class="my-5">
<p class="lead font-weight-normal">1.How do you give a ninja directions?</p>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q1" value="A" checked>
<label class="form-check-label">Show them a map</label>
</div>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q1" value="B">
<label class="form-check-label">A ninja will find you</label>
</div>
</div>
<div class="my-5">
<p class="lead font-weight-normal">2.If a ninja has three apples and give one away, how many does he have?</p>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q2" value="A" checked>
<label class="form-check-label">one apple</label>
</div>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q2" value="B">
<label class="form-check-label">two apples</label>
</div>
</div>
<input type="submit" value="submit" />
</form>
I am working on a basic timed trivia game for my current school program, utilizing JavaScript and jQuery. As a simple overview, this trivia game employs 'radio buttons' to record user responses. Each button has a value of "1" ( for correct answer) or "0" (for wrong answer). However, no matter what I've tried or looked up, I have been unable to resolve my current problem: jQuery/JavaScript will either say all answers inputted are either all "correct" OR "wrong".
As you will see in my code, this problem is specific to my function responseCheck() and $("#submitButton").on("click", function() functions.
In my function responseCheck() function, my logic is that by using this $("input[type='radio']:checked").each(function() function, jQuery will go through all my the radio buttons that are checked; and then execute the following if/else statements:
if (parseInt($("input[type='radio']:checked").val()) === 1) : using this I am saying if the value of the button is equal to 1 (integer), then increment the correctCount variable.
else : using this I am saying if the value isn't equal to 1 (integer), then increment the wrongCount variable.
Obviously, there is some tangent i'm not connecting to my issue. I appreciate all help received. Thank you in advance.
PS
Ignore the commented out sections in my JS file, as they are bits of old/failed code
The top two variables in my JS file were my attempts to use arrays to catalog right/wrong answers but that didn't work for me. Feel free to ignore these as well.
I supplied my html file just for reference.
$(document).ready(function() {
//set up variables for game
//var responsesArray = [];
var correctAnswer = [1];
var wrongAnswer = [0];
//var buttonChecked = parseInt($("input[class='questions']:checked").val());
var timer = 46;
var timerInterval;
var correctCount = 0;
var wrongCount = 0;
var noDoubleDip = false;
//!! If extra time, add audio queues here!!
// !!---------------
//functions
function timerCountDown() {
timer--;
if (timer > 0) {
$("#timeLeft").text("Time Left: " + timer + " seconds");
console.log(timer);
}
else {
gameOver("fail");
}
}
//function for when the game ends
function gameOver(status) {
clearInterval(timerInterval);
if(status == 'success') {
alert('You Did It');
}
else {
alert('Time Ran Out');
}
console.log("times up!")
$(".playScreen").hide();
$(".bannerScreen").hide();
$(".startScreen").hide();
$(".endScreen").show();
console.log("game's over!");
}
//function for going through responses; issue: COUNTS ALL FOR ONE <--- UNRESOLVED
function responseCheck() {
// responsesArray.push(buttonChecked);
$("input[type='radio']:checked").each(function() {
//debugger;
if (parseInt($("input[type='radio']:checked").val()) === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("wrong Answers: " + wrongCount);
}
});
// BELOW DID WORK BUT RAN THROUGH EACH question AT THE SAME TIME
// // question 1
// if (parseInt($("input[name='question1']:checked").val()) === 1) {
// console.log("correct");
// correctCount++;
// $("#correctCountDiv").text("Correct Answers: " + correctCount);
// }
// else {
// console.log("incorrect");
// wrongCount++;
// $("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
// }
}
//start game click event
$("#startButton").on("click", function() {
event.preventDefault();
$(".playScreen").show();
$(".bannerScreen").show();
$(".startScreen").hide();
$(".endScreen").hide();
timerInterval = setInterval(timerCountDown, 1000);
});
//on click attempt to record user presses in quiz
// $("#submitButton").on("click", function() {
// if (noDoubleDip) {
//
// // event.preventDefault();
// //
// // attempt to prevent additional clicks from counting towards appropiate category -- UNRESOLVED <--
//
// // above code actually stopped another button from being pressed
//
// correctCount = "";
//
// wrongCount = "";
//
// }
//
// noDoubleDip = true;
// });
//if the submit button is pressed before the time runs out
$("#submitButton").on("click", function() {
event.preventDefault();
responseCheck();
console.log("Finished before timer ran out");
gameOver("success");
});
// $("input").on("click", function() {
//
// if (correctAnswer[0]) {
//
// console.log("Correct Input Received");
//
// }
//
// else {
//
// console.log("Incorrect Input Received");
// }
//
// });
});
<!DOCTYPE html>
<html>
<head>
<title> Poke-Trivia </title>
<!--Meta-Viewport tag-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--jQuery Link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--javascript link-->
<script src="assets/javascript/app.js"></script>
<!--CSS link-->
<link href="assets/css/style.css" rel="stylesheet">
<!--Google Fonts link-->
<link href="https://fonts.googleapis.com/css?family=Oregano|Sedgwick+Ave" rel="stylesheet">
</head>
<body>
<h1> Pokemon Trivia </h1>
<form>
<!--START SCREEN BEGINS-->
<div class="startScreen">
<h2> Press the Pokeball to start! </h2>
<button id="startButton"></button>
</div>
<!--END OF START SCREEN-->
<h2 class="bannerScreen"> Answer 'em All </h2>
<h2 class="bannerScreen" id="timeLeft"> Time Left: 45 seconds </h3>
<!--START OF QUESTIONS-->
<div class="playScreen">
<p> Question 1: What is HM04 in GEN 1 (Red/Blue/Yellow)? </p>
<hr>
<div>
<input type="radio" class="questions" name="question1" value="0" id="1A">
<label for="1A"> Cut </label>
<input type="radio" class="questions" name="question1" value="0" id="1B">
<label for="1B"> Surf </label>
<input type="radio" class="questions" name="question1" value="1" id="1C">
<label for="1C"> Strength </label>
<input type="radio" class="questions" name="question1" value="0" id="1D">
<label for="1D"> Rock Smash </label>
</div>
<br>
<p> Question 2: Who is the Gym Leader of Fuschia City in GEN 2/4 (Silver/Gold/Diamond/Pearl/Platinum)?</p>
<hr>
<div>
<input type="radio" class="questions" name="question2" value="0" id="2A">
<label for="2A"> Chuck </label>
<input type="radio" class="questions" name="question2" value="0" id="2B">
<label for="2B"> Koga </label>
<input type="radio" class="questions" name="question2" value="0" id="2C">
<label for="2C"> Whitney </label>
<input type="radio" class="questions" name="question2" value="1" id="2D">
<label for="2D"> Janine </label>
</div>
<br>
<p> Question 3: Which Water-type Pokemon was a "Starter" for GEN 2/4 (Silver/Gold/Diamond/Pearl/Platinum)?</p>
<hr>
<div>
<input type="radio" class="questions" name="question3" value="1" id="3A">
<label for="3A"> Totodile </label>
<input type="radio" class="questions" name="question3" value="0" id="3B">
<label for="3B"> Oshawott </label>
<input type="radio" class="questions" name="question3" value="0" id="3C">
<label for="3C"> Piplup </label>
<input type="radio" class="questions" name="question3" value="0" id="3D">
<label for="3D"> Mudkip </label>
</div>
<br>
<p> Question 4: How many Legendary Pokemon were introduced in GEN 3 (Ruby/Sapphire/Emerald)?</p>
<hr>
<div>
<input type="radio" class="questions" name="question4" value="0" id="4A">
<label for="4A"> 3 </label>
<input type="radio" class="questions" name="question4" value="1" id="4B">
<label for="4B"> 8 </label>
<input type="radio" class="questions" name="question4" value="0" id="4C">
<label for="4C"> 6 </label>
<input type="radio" class="questions" name="question4" value="0" id="4D">
<label for="4D"> 2 </label>
</div>
<br>
<p> Question 5: In what region did GEN 6 (X/Y) take place?</p>
<hr>
<div>
<input type="radio" class="questions" name="question5" value="0" id="5A">
<label for="5A"> Johto </label>
<input type="radio" class="questions" name="question5" value="0" id="5B">
<label for="5B"> Unova </label>
<input type="radio" class="questions" name="question5" value="1" id="5C">
<label for="5C"> Kalos </label>
<input type="radio" class="questions" name="question5" value="0" id="5D">
<label for="5D"> Sinnoh </label>
</div>
<br>
<p> Question 6: In GEN 7 (Sun/Moon), what "notable" exclusion was present in the game, when compared to its predecessors?</p>
<hr>
<div>
<input type="radio" class="questions" name="question6" value="1" id="6A">
<label for="6A"> Bicycles </label>
<input type="radio" class="questions" name="question6" value="0" id="6B">
<label for="6B"> Rare Candies </label>
<input type="radio" class="questions" name="question6" value="0" id="6C">
<label for="6C"> Pokemon Daycare </label>
<input type="radio" class="questions" name="question6" value="0" id="6D">
<label for="6D"> A Rival </label>
</div>
<br>
<p> Question 7: In which year did the first ever Pokemon movie, featuring Mewtwo and Mew, release? </p>
<hr>
<div>
<input type="radio" class="questions" name="question7" value="0" id="7A">
<label for="7A"> 1998 </label>
<input type="radio" class="questions" name="question7" value="1" id="7B">
<label for="7B"> 1999 </label>
<input type="radio" class="questions" name="question7" value="0" id="7C">
<label for="7C"> 2000 </label>
<input type="radio" class="questions" name="question7" value="0" id="7D">
<label for="7D"> 2001 </label>
</div>
<br>
<p> Question 8: TRUE OR FALSE: Mark Hamill, of Star Wars fame, provided the voice of Entei in Pokemon 3: The Movie? </p>
<hr>
<div>
<input type="radio" class="questions" name="question8" value="0" id="8A">
<label for="8A"> True </label>
<input type="radio" class="questions" name="question8" value="1" id="8B">
<label for="8B"> False </label>
</div>
<br>
<p> Question 9: Is it possible to teach "Fly" to Scyther (Bug, Flying type)? </p>
<hr>
<div>
<input type="radio" class="questions" name="question9" value="0" id="9A">
<label for="9A"> Yes, he does have wings after all. </label>
<input type="radio" class="questions" name="question9" value="1" id="9B">
<label for="9B"> No, Game Freak hates him. </label>
</div>
<br>
<p> Question 10: How many current, potential evolutions are there for Evee? </p>
<hr>
<div>
<input type="radio" class="questions" name="question10" value="0" id="10A">
<label for="10A"> 5 </label>
<input type="radio" class="questions" name="question10" value="0" id="10B">
<label for="10B"> 6 </label>
<input type="radio" class="questions" name="question10" value="0" id="10C">
<label for="10C"> 7 </label>
<input type="radio" class="questions" name="question10" value="1" id="10D">
<label for="10D"> 8 </label>
</div>
<br>
<button id="submitButton" type="submit">Submit Answers</button>
</div>
<!-- End of Questions -->
<!-- Start of End Screen -->
<div class="endScreen">
<h2> Here are your results </h2>
<hr id="endScreenHr">
<h2 id="correctCountDiv"> Correct Answers: 0</h2>
<h2 id="wrongCountDiv"> Wrong Answers: 0</h2>
</div>
<!-- End of End Screen -->
</form>
</body>
</html>
JQuery's .each() is already providing you with each element per iteration as the keyword $(this), by you using $(parseInt($('input[type="radio"]:checked').val()) === 1) you are grabbing every element that is a radio button and checked, so .val() is giving you the value of the first element in the collection on each iteration, change your function to the following:
$("input[type='radio']:checked").each(function() {
//if (parseInt($("input[type='radio']:checked").val()) === 1) { //NO
if (parseInt($(this).val()) === 1) { //Check the .val() of the current radio button
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("wrong Answers: " + wrongCount);
}
});
Here is a working version of your responseCheck():
$("input[type='radio']:checked").each(function(i, e) {
//debugger;
if (parseInt($(e).val()) === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("wrong Answers: " + wrongCount);
}
});
I am attaching my .js as well as php file, no output is being displayed on the screen not even the __________ placed in the <p> tag ,the php file is only up to the <p> tag where the id for the .js file is attached.
js code:
var timeleft = 600;
var startTime = 0;
var currentTime = 0;
function convertSeconds(s) {
var min = floor(s / 60);
var sec = s % 60;
return nf(min, 2) + ':' + nf(sec, 2);
}
var ding;
function preload() {
ding = loadSound("ding.mp3");
}
function setup() {
noCanvas();
startTime = millis();
var params = getURLParams();
console.log(params);
if (params.minute) {
var min = params.minute;
timeleft = min * 60;
}
var timer = select('#timer');
timer.html(convertSeconds(timeleft - currentTime));
var interval = setInterval(timeIt, 1000);
function timeIt() {
currentTime = floor((millis() - startTime) / 1000);
timer.html(convertSeconds(timeleft - currentTime));
if (currentTime == timeleft) {
ding.play();
clearInterval(interval);
//counter = 0;
}
}
}
html code:
<html>
<head>
<title>online examination system</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="style2.css">
<meta charset="UTF-8">
<script language="javascript" type="text/javascript src=" libraries
/p5.js</script>
< script language = "javascript"
src = "libraries/p5.dom.js" ></script>
<script language="javascript" src="libraries/p5.sound.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
</head>
<body>
<div class=header>
<img class="img-style" src="Online-Examination-System-Banner.jpeg" width="1166px" height="250px">
</div>
<div class="top">
<ul id="navigation">
<li>HOME</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
<li>EXAMINATION</li>
<li>LOGIN</li>
<li>LOGOUT</li>
</ul>
</div>
<p style="font-size:40;color:white;font-weight:bolder;">Welcome !</p>
<p id="timer" style="color:white;font-family:courier;font-size:28px; float:center;">______</p>
<form action="cplus.php" method="post" >
<div style="margin-top:10px;margin-right:85px;margin-left:100px;margin- bottom:20px;background:rgba(0,0,0,0.5)">
<p style="color:white;font-family:courier;font-size:18px">1. Which of the following correctly declares an array?</p> <br>
<input class="exam-btn" type="radio" name="q1" id="q1-a" value="A" checked>
<label for="q1-a" style="color:white;font-family:courier;font-size:18px">int array[10];</label>
<input class="exam-btn" type="radio" name="q1" id="q1-b" value="B">
<label style="color:white;font-family:courier;font-size:18px">int array;</label>
<input class="exam-btn" type="radio" name="q1" id="q1-c" value="C">
<label style="color:white;font-family:courier;font-size:18px">array{10};</label>
<input class="exam-btn" type="radio" name="q1" id="q1-d" value="D">
<label style="color:white;font-family:courier;font-size:18px">array array[10];</label>
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">2. What is the index number of the last element of an array with 9 elements?</p> <br>
<input class="exam-btn" type="radio" name="q2" id="q2-a" value="A">
<label style="color:white;font-family:courier;font-size:18px">9</label>
<input class="exam-btn" type="radio" name="q2" id="q2-b" value="B" checked>
<label style="color:white;font-family:courier;font-size:18px">8</label>
<input class="exam-btn" type="radio" name="q2" id="q2-c" value="C">
<label style="color:white;font-family:courier;font-size:18px">0</label>
<input class="exam-btn" type="radio" name="q2" id="q2-d" value="D">
<label style="color:white;font-family:courier;font-size:18px">programmer defined</label>
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">3. Which of the following accesses the seventh element stored in array?</p> <br>
<input class="exam-btn" type="radio" name="q3" id="q3-a" value="A" checked>
<label style="color:white;font-family:courier;font-size:18px">array[6];</label>
<input class="exam-btn" type="radio" name="q3" id="q3-b" value="B" >
<label style="color:white;font-family:courier;font-size:18px">array[7];</label>
<input class="exam-btn" type="radio" name="q3" id="q3-c" value="C" >
<label style="color:white;font-family:courier;font-size:18px">array(7);</label>
<input class="exam-btn" type="radio" name="q3" id="q3-d" value="D" >
<label style="color:white;font-family:courier;font-size:18px">array;</label>
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">4. Which of the following gives the memory address of the first element in array?</p> <br>
<input class="exam-btn" type="radio" name="q4" id="q4-a" value="A" >
<label style="color:white;font-family:courier;font-size:18px">array[0];</label>
<input class="exam-btn" type="radio" name="q4" id="q4-b" value="B" >
<label style="color:white;font-family:courier;font-size:18px">array[1];</label>
<input class="exam-btn" type="radio" name="q4" id="q4-c" value="C" >
<label style="color:white;font-family:courier;font-size:18px">array[2];</label>
<input class="exam-btn" type="radio" name="q4" id="q4-d" value="D" checked>
<label style="color:white;font-family:courier;font-size:18px">none</label>
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">5. What will be the output of this program?</p> <br>
<pre style="color:white;font-family:courier;font-size:18px">
#include <stdio.h>
using namespace std;
int array1[] = {1200, 200, 2300, 1230, 1543};
int array2[] = {12, 14, 16, 18, 20};
int temp, result = 0;
int main()
{
for (temp = 0; temp < 5; temp++)
{
result += array1[temp];
}
for (temp = 0; temp < 4; temp++)
{
result += array2[temp];
}
cout << result;
return 0;
}
</pre>
</pre>
<input class="exam-btn" type="radio" name="q5" id="q5-a" value="A" >
<label style="color:white;font-family:courier;font-size:18px">6553</label>
<input class="exam-btn" type="radio" name="q5" id="q5-b" value="B" checked>
<label style="color:white;font-family:courier;font-size:18px">6533</label>
<input class="exam-btn" type="radio" name="q5" id="q5-c" value="C" >
<label style="color:white;font-family:courier;font-size:18px">6522</label>
<input class="exam-btn" type="radio" name="q5" id="q5-d" value="D" >
<label style="color:white;font-family:courier;font-size:18px">12200</label>
<br><br><br><br>
<! 1. token 2. sensitive 3. identifiers
4. octal 5. \0n -->
<p style="color:white;font-family:courier;font-size:18px">6.The smallest individual unit in a program is known as a …………………… </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p><input class="exam-btn" type="text" name="" >
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">7.C++ Language is case …………………. </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p><input class="exam-btn" type="text" name="" >
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">8.An ………………… is a long sequence of letters and digits. </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p><input class="exam-btn" type="text" name="" >
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">9.A sequence of digits beginning with zero is considered to be …………….number. </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p><input class="exam-btn" type="text" name="" >
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">10.………………. escape sequence represents the given number in octal form. </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p>
<input class="exam-btn" type="text" name="" >
<br><br><br><br>
<input type="submit" value="Submit quiz">
</div>
<div style="font-size:18px;color:white;font-weight:bolder;">
<?php
$answer1;
$answer2;
$answer3;
$answer4;
$answer5;
$answer1 = $_POST['q1'];
$answer2 = $_POST['q2'];
$answer3 = $_POST['q3'];
$answer4 = $_POST['q4'];
$answer5 = $_POST['q5'];
$totalcorrect;
$totalcorrect = 0;
if($answer1 == "A") {$totalcorrect++;}
if($answer2 == "B") {$totalcorrect++;}
if($answer3 == "A") {$totalcorrect++;}
if($answer4 == "D") {$totalcorrect++;}
if($answer5 == "B") {$totalcorrect++;}
echo "total correct answers are".$totalcorrect;
?>
</div>
</div>
</form>
</body>
</html>