I'm working on a small game with multiple choices in Javascript, after I choose the answers and hit submit, at the bottom, it will show the answer of how many questions I answer correctly, and incorrectly as "You got question 1 correct", or "You got question 2 wrong". However, I'm not able to get the "You got question "" right/wrong in the position right after "Correct/Wrong Answer:". But when I tried the method of showing the score, it does work. Can someone point me a direction please? Thank you for your time of reading my post.
var firstQuestion = document.getElementsByName("firstQuestion");
var secondQuestion = document.getElementsByName("secondQuestion");
var thirdQuestion = document.getElementsByName("thirdQuestion");
var myArr = [firstQuestion, secondQuestion, thirdQuestion];
var score = 0;
var score2 = 0;
var score3 = 0;
var firstPara = document.getElementById("firstPara");
var secondPara = document. getElementById("secondPara");
function submitted() {
//for(var i = 0; i < myArr.length; i++) {
for(var o = 0; o < firstQuestion.length; o++) {
var num = o+1;
var name= "choice" + num ;
if ((document.getElementById(name).getAttribute("value") =="true") && (document.getElementById(name).checked))
{
score++;
$("#correctScore").text(score);
document.getElementById("firstPara").innerHTML =document.getElementById("firstPara").innerHTML + "You got question 1 right!<br>";
break;
}
}
if(score==0)
{
document.getElementById("secondPara").innerHTML =document.getElementById("secondPara").innerHTML + "You got question 1 wrong!<br>";;
}
//question 2
for(var o = 3; o < secondQuestion.length + 3; o++) {
var num = o+1;
var name= "choice" + num ;
if ((document.getElementById(name).getAttribute("value") =="true") && (document.getElementById(name).checked))
{
score++;
score2++;
$("#correctScore").text(score);
document.getElementById("firstPara").innerHTML =document.getElementById("firstPara").innerHTML + "You got question 2 right!<br>";
break;
}
}
if(score2==0)
{
document.getElementById("secondPara").innerHTML =document.getElementById("secondPara").innerHTML + "You got question 2 wrong!<br>";;
}
//question 3
for(var o = 6; o < thirdQuestion.length + 6; o++) {
var num = o+1;
var name= "choice" + num ;
if ((document.getElementById(name).getAttribute("value") =="true") && (document.getElementById(name).checked))
{
score++;
score3++;
$("#correctScore").text(score);
document.getElementById("firstPara").innerHTML =document.getElementById("firstPara").innerHTML + "You got question 3 right!<br>";
break;
}
}
if(score3==0)
{
document.getElementById("secondPara").innerHTML =document.getElementById("secondPara").innerHTML + "You got question 3 wrong!<br>";;
$("#correctScore").text=0;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Trivia Game</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Trivia Game</h1>
</div>
<div class="row">
<div class="col-md-12">
<div class="timeRemaining">
<p>Time Remaining:
<span id="timer"></span>
</div>
</div>
<input type="image" id="startBtn" src="assets/images/start.jpg" value="click me"/>
<br>
<div class="row">
<div class="col-md-12"></div>
<div class="questions">
What is the name of Black Panther's home?
</br>
<input id="choice1" type="radio" name="firstQuestion" value="false"><small>K'un Lun</small>
<input id="choice2" type="radio" name="firstQuestion" value="true"><small>Wakanda</small>
<input id="choice3" type="radio" name="firstQuestion" value="false"><small>Kamar Taj</small>
<br>
<br>
How did Dr Strange defeat Dormammu?</br>
<input id="choice4" type="radio" name="secondQuestion" value="false"><small>Built An Energy Prison</small></input>
<input id="choice5" type="radio" name="secondQuestion" value="true"><small>Create a Time Loop</small></input>
<input id="choice6" type="radio" name="secondQuestion" value="false"><small>Froze Time</small></input>
<br>
<br>
Which hero secretly has a family?</br>
<input id="choice7" type="radio" name="thirdQuestion" value="true"><small>Hawkeye</small></input>
<input id="choice8" type="radio" name="thirdQuestion" value="false"><small>Wakanda</small></input>
<input id="choice9" type="radio" name="thirdQuestion" value="false"><small>Kamar Taj</small></input>
</div>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col-md-5"></div>
<input type="button" id="submit" value="Submit" onclick="submitted()"/>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div id="answerScreen">
<div class="splashBox2">
<h2>Let's see how you did</h2>
<hr/>
<p id="correctScreen">Correct Answers:
<span id="correctScore"></span>
</p>
<p id="firstPara" style="font-size: 20;color: azure;margin-left: 60%;"></p>
<p id="wrongScreen">Wrong Answers:
<span id="wrongScore"></span>
</p>
<p id="secondPara" style="font-size: 20;color: azure; margin-left: 60%;"></p>
</div>
</div>
</div>
</div>
<script src="assets/javascript/app.js"></script>
</div>
</body>
</html>
After reading your clarification and perusing your code, here's what I can suggest.
<p id="correctScreen">Correct Answers:<span id="correctScore"></span></p>
<p id="" style="font-size: 20;color: azure;margin-left: 60%;"></p>
<p id="wrongScreen">Wrong Answers:<span id="wrongScore"></span></p>
<p id="secondPara" style="font-size: 20;color: azure; margin-left: 60%;"></p>
The correctScore span is where you want your "You got..." text to appear, and you could accomplish this by simply replacing $("#correctScore").text(score); with $("#correctScore").text("You got question 1 right"); (And obviously you'd want to rename your elements and variables so they make sense with the replacement.)
The only issue is that the next line of text (the text for question 2) would be vertically aligned with "Correct answers" instead of with the question 1 text. The simplest way to fix this (and not really a professional way) would be to add a bunch of   characters to indent your text. Below are some other (better) options.
Using just HTML markup, you could replace the span with a block element, like a div (and change your correctScreen from being a p to being a div to make this work). The catch is that switching to a block element also means the contents would start on a new line, so they wouldn't be next to "Correct answers:" as you would like -- unless you styled the block element with float: left (and made the other changes that go along with this, such as specifying a width attribute for your divs.)
Or since your page has bootstrap, you could avoid handling (some of) these details yourself and get two divs to appear side-by-side by doing something like this:
<div class="row">
<div class="col-md-4" id="spacer"></div>
<div class="col-md-4" id="correctAnswersIntro">Correct answers:</div>
<div class="col-md-4" id="correctAnswersList">You got question 1 right<br></div>
</div>
There are few issue that is needed to be corrected in your code.
Firstly, the JavaScript snippet has a syntax error, where the last brace is missing. I assume that it's a mistake while copying it here.
Secondly, you are using the mix of JavaScript API and jQuery to access DOM elements. If you stick to one, it will be cleaner and the code will be easier to read. Please see below.
...
var firstQuestion = $('[name="firstQuestion"]');
var secondQuestion = $('[name="seconQuestion"]');
var thirdQuestion = $('[name="thirdQuestion"]');;
var score = 0;
var score2 = 0;
var score3 = 0;
var firstPara = $("#firstPara");
var secondPara = $("#secondPara");
function submitted() {
for (var o = 0; o < firstQuestion.length; o++) {
var num = o + 1;
var name = "choice" + num;
if (($('#' + name).getAttribute("value") == "true") && ($('#' + name).checked))
{
score++;
$("#correctScore").text(score);
$("#firstPara").html($("#firstPara").html() + "You got question 1 right!<br>");
break;
}
}
if (score == 0)
{
$("#secondPara").html($("#secondPara").html() + "You got question 1 wrong!<br>");
}
//question 2
for (var o = 3; o < secondQuestion.length + 3; o++) {
var num = o + 1;
var name = "choice" + num;
if (($('#' + name).getAttribute("value") == "true") && ($('#' + name).checked))
{
score++;
score2++;
$("#correctScore").text(score);
$("#firstPara").html($("#firstPara").html() + "You got question 2 right!<br>");
break;
}
}
if (score2 == 0)
{
$("#secondPara").html($("#secondPara").html() + "You got question 2 wrong!<br>");
;
}
//question 3
for (var o = 6; o < thirdQuestion.length + 6; o++) {
var num = o + 1;
var name = "choice" + num;
if (($('#' + name).getAttribute("value") == "true") && ($('#' + name).checked))
{
score++;
score3++;
$("#correctScore").text(score);
$("#firstPara").html($("#firstPara").html() + "You got question 3 right!<br>");
break;
}
}
if (score3 == 0)
{
$("#secondPara").html($("#secondPara").html() + "You got question 3 wrong!<br>");
;
$("#correctScore").text(0);
}
}
...
Please post the full HTML code here, so that it would be easier to correct it.
Related
I am building in javascript a simple feedback that has a text area and is grabbing the text and displaying a successful message when the add button is clicked. When the view feedback button is clicked it should render the feedback and it does but if I click the button once and then type in the text area again and again it keeps rendering multiple times the same feedback message. Attached is my javascript code.
var array = Array();
var x = 0;
function addFeedback() {
array[x] = document.getElementById('feedback').value;
x++;
document.getElementById('feedback').value = '';
document.getElementById('result').innerHTML =
'<h2><h3> Your have successfully Added Feedback!</h3></h2>';
}
var feedback = '';
function displayFeedback() {
for (var i = 1; i < array.length + 1; i++) {
feedback = array[i - 1] + '<br/>';
console.log(feedback);
}
document.getElementById('result').innerHTML =
'<h2>feedback Details: </h2>' + feedback.split('<br>');
}
<html>
<head>
<script src="script.js" type="text/javascript"> </script>
</head>
<body>
<!-- Fill code here -->
<div>
<h2>Feedback for the ART OF LIVING</h2>
<div>
<label for="feedback"></label>Enter the Feedback:
<textarea id="feedback" name="feedback" value="feedback" type="text"></textarea>
<div>
<input type="button" id="create" name="create" onclick="javascript:addFeedback()">Add Feedback</input><br/>
<input type="button" id="view" name="view" onclick="javascript:displayFeedback()">View feedback</input>
</div>
<div id="result"></div>
</div>
</div>
</body>
</html>
I'm trying to make a quiz, here is the html :
<!DOCTYPE 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>English Test</title>
<link rel="stylesheet" href="testCss.css">
</head>
<body>
<br>
<div style="font-size:20px">
<p>Please choose the correct answer and at the end tap the score button. </p>
<br>
<div>
2. I
<select id="question2">
<option value="_">_</option>
<option value="Am">am</option>
<option value="Is">is</option>
<option value="Are">are</option>
</select>
22 years old.
<span id="question2_answer"></span>
</div>
<br>
<br>
<div>
101. When can we meet again?
<span id="question101_answer"></span>
<div>
<input type="radio" name="question101" > When are you free?<br>
<input type="radio" name="question101" > It was two days ago. <br>
<input type="radio" name="question101" > Can you help me?
</div>
</div>
<br>
<br>
<div>
8. What is your father like?
<span id="question8_answer"></span>
<div>
<input type="radio" name="question8" > He likes listenning to music.<br>
<input type="radio" name="question8" > He likes to play football. <br>
<input type="radio" name="question8" > He is friendly.<br>
<input type="radio" name="question8" > He has a car.
</div>
</div>
<br>
<br>
<button id="button1" class="button" onclick="viewScore()">Score Result</button>
<br>
<input type="text" id="grade1" value="" readonly>
<br>
<script src="testJs.js"></script>
and here is the testJs.js that i used:
var score = 0;
function viewScore() {
var answer2 = document.getElementById("question2").value;
var answer8 = document.getElementsByName("question8");
var answer101 = document.getElementsByName("question101").value;
if (answer2 == "Am") {
document.getElementById("question2_answer").style.color = "green";
document.getElementById("question2_answer").innerHTML = "✔";
score += 1;
} else {
document.getElementById("question2_answer").style.color = "red";
document.getElementById("question2_answer").innerHTML = "✖ Wrong!";
}
if (answer8[2].checked) {
document.getElementById("question8_answer").style.color = "green";
document.getElementById("question8_answer").innerHTML = "✔";
score += 1;
} else {
document.getElementById("question8_answer").style.color = "red";
document.getElementById("question8_answer").innerHTML = "✖ Wrong!";
}
if (answer101[0].checked) {
document.
getElementsById("question101_answer").style.color = "green";
document.getElementsById("question101_answer").innerHTML = "✔";
score += 1;
} else {
document.getElementsByID("question101_answer").style.color = "red";
document.getElementsByID("question101_answer").innerHTML = "✖ Wrong!";
}
if (score<=5) {
document.getElementById("grade1").value = " Your total score is: "+ score+" Your level is: "+"Elementary.";
} else if(score<=8){
document.getElementById("grade1").value = " Your total score is: "+ score+" Your level is: "+"Pre Intermediate.";
}else if(score<=15){
document.getElementById("grade1").value = " Your total score is: "+ score+" Your level is: "+"Intermediate.";
}else{
document.getElementById("grade1").value = " Your total score is: "+ score+" Your level is: "+"Upper Intermediate.";
}
console.log(score);
score = 0;
}
However, I'm getting following error on question 101. I check it several times and I have no idea where does this error coming from ! It refers to question 101 and mentions cannot read property '0' of undefined.
Thanks for any help in advance.
testJs.js:26 Uncaught TypeError: Cannot read property '0' of undefined
at viewScore (testJs.js:26)
at HTMLButtonElement.onclick (testHTML.html:57)
This is happening because in this line:
var answer101 = document.getElementsByName("question101").value;
you are putting the value of the input (which is NULL or UNDEFINED because the HTMLCollection returned by getElementsByName (note the plural) doesn't have a value property) into the var answer101 and NOT the input itself.
To fix this, change the above line to:
var answer101 = document.getElementsByName("question101");
You have to select array (not value) for var answer101
var answer101 = document.getElementsByName("question101");
And correct if content for answer101
if (answer101[0].checked) {
document.getElementById("question101_answer").style.color = "green";
document.getElementById("question101_answer").innerHTML = "✔";
score += 1;
} else {
document.getElementById("question101_answer").style.color = "red";
document.getElementById("question101_answer").innerHTML = "✖ Wrong!";
}
I am generating a default header for a given file and I want the sender ID to have 4 characters and the sender Name to have 45 characters. if they are less than 4 and 45 respectfully, I need to enter spaces to have the 4 or 45 characters. How can I do this?
In the figure below as you can see there are not filled in the necessary spaces for when I do blank file. And even if I write something on the sender ID or the sender Name nothing is added.
What am I doing wrong?
function download(fileName, text) {
let element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', fileName);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
document.getElementById("generate").addEventListener("click", function(){
// Generate .txt file header
//force 4 chars
let id = document.getElementById("senderID");
if (id.textContent.length < 4) {
id.textContent += ' ';
}
//force 45 chars
let name = document.getElementById("senderName");
if (name.textContent.length < 45) {
name.textContent += ' ';
}
let header = "HDRPB" + id.textContent + name + "01.10";
let body = document.getElementById("fileContents").textContent;
let text = header;
let fileName = document.getElementById("fileName").value + ".txt";
download(fileName, text);
}, false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/site.css">
<title>Generator</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-2 p-0 mt-2">
<label for="senderID" class="font-weight-bold">Sender ID:</label>
<input id="senderID" type="text" maxlength="4" size="4"/>
</div>
<div class="col-6 p-0 mt-2">
<label for="senderName" class="font-weight-bold">Sender Name:</label>
<input id="senderName" type="text" maxlength="45" size="45"/>
</div>
</div>
<div class="row mt-5">
<div class="col-10">
<label for="fileName" class="font-weight-bold">File Name:</label>
<input id="fileName" type="text"/>
</div>
<div class="col-2">
<button id="generate" type="button" class="btn btn-light font-weight-bold mx-auto">Generate File</button>
</div>
</div>
<div id="fileContents" class=""></div>
</div>
<script src="js/app.js"></script>
</body>
</html>
Consider the following code:
function genId(seed) {
var result = new Array(4);
for (var i = 0; i < 4; i++) {
result[i] = seed[i] || " ";
}
return result.join("");
}
function genName(seed) {
var result = new Array(45);
for (var c = 0; c < 45; c++) {
result[c] = seed[c] || " ";
}
return result.join("");
}
document.getElementById("genHead").addEventListener("click", function() {
var i = document.getElementById("hid").value;
var n = document.getElementById("hname").value;
var header = genId(i) + genName(n);
document.getElementById("results").innerHTML = header;
});
#results {
font-family: monospace;
border: 1px solid #ccc;
display: inline-block;
}
<p>ID: <input type="text" id="hid" /></p>
<p>Name: <input type="" id="hname" /></p>
<button id="genHead">Generate Header</button>
<div id="results"></div>
In this example, I am creating an Array of the specific number of characters. String is considered an Array of Characters anyway. I am using $nbsp; to represent spaces in HTML but you can use ' ' or " ".
There will always be a result due to result[c] = seed[c] || " "; If seed has a character in that position, it will be entered into result at the same position. Otherwise it will enter the No Break Space or the character you want.
You can also do this:
function formatText(t, n, c) {
if(t == undefined){
return "";
}
if(n == undefined){
n = 45;
}
if(c == undefined){
c = " ";
}
var r = new Array(n);
for (var i = 0; i < n; i++) {
r[i] = t[i] || c;
}
return r.join("");
}
Then use like so:
var i = formatText("12", 4, " ");
var n = formatText("test", 45, " ");
Hope this helps.
wondering if anyone can help with my code. I've been trying to get it to work all day and I have no Idea why the code isn't working :(. So the code is supposed to help the user pick a characters in a game to code with 4 questions. The user inputs there answer via radio buttons.
This is the HTML:
<h2> What Champion Should You Play?</h2>
<h3>
What Lane do You Want to Play?
</h3>
<form onsubmit="getImg()" method="post">
<p> Top </p> <img src="http://img10.deviantart.net/d268/i/2014/226/e/a/gnar__by_dukeofdunkshire-d7v6rgm.jpg"> <input type="radio" name="Lane" value="Top" id="11">
<p> Mid </p><img src="http://www.solomidcdn.com/images/champions/velkoz.png"><input type="radio" name="Lane" value="Mid" id="12">
<p> Jungle</p><img src="https://pbs.twimg.com/media/CF4vu3ZW0AEwR0M.png"><input type="radio" name="Lane" value="Jungle" id="13">
<p> ADC</p><img src="http://img.dwstatic.com/huyaedg/img/hero/Caitlyn.png"><input type="radio" name="Lane" value="Adc" id="14">
<p> Support</p><img src="http://i.imgur.com/2kwycth.png"> <input type="radio" name="Lane" value="Support">
<h3>
What Role do You Want to Play?
</h3>
<p>Assassin</p> <img src="http://vignette3.wikia.nocookie.net/leagueoflegends/images/3/39/Assassin_icon.jpg/revision/20140607013330"> <input type="radio" name="Role" value="Assasin" id="21">
<p>Tank</p><img src="http://3.bp.blogspot.com/--M5c7oXkX6A/U4_N5v-mLjI/AAAAAAAAQ6g/hduKMsQwSX4/s1600/profileIcon662.jpg"> <input type="radio" name="Role" value="Tank" id="22">
<p>Bruiser</p><img src="http://4.bp.blogspot.com/-ZGQQg_79y48/U4-_zTlXL3I/AAAAAAAAQ4g/wnwOyxJ_Ml0/s1600/profileIcon658.jpg"> <input type="radio" name="Role" value="Bruiser" id= "23">
<p>Marksman</p><img src="http://3.bp.blogspot.com/-nT8UdY4SZao/U4-_zr_SKQI/AAAAAAAAQ4o/suUj5L2NmFc/s1600/profileIcon660.jpg"> <input type="radio" name="Role" value="Marksman" id= "24">
<p>Mage</p><img src="http://3.bp.blogspot.com/-pL_H0M6kCtM/U4-_zXyUA6I/AAAAAAAAQ5A/sFrySjxNBsc/s1600/profileIcon659.jpg"> <input type="radio" name="Role" value="Mage" id="25">
<h3>
Do You Want to Piss People off with Cheese?
</h3>
<p>Yes</p><img src="http://www.clker.com/cliparts/O/k/f/l/4/0/cheese-hi.png"> <input type="radio" name="Cheese" value="Yes" id="31">
<p>No</p><img src="http://assets4.tribesports.com/system/challenges/images/000/023/603/original/20120723031440-no-cheese-for-one-week.jpg"> <input type="radio" name="Cheese" value="No" id="32">
<h3>
Mad Plays or Easy Days?
</h3>
<p> Mad Plays</p><img src="http://pre12.deviantart.net/4280/th/pre/i/2014/012/3/b/chibi_thresh_by_koiyaki-d71x098.png"><input type="radio" name="Plays" value="Yes" id="41">
<p> Easy Days</p><img src="http://img3.wikia.nocookie.net/__cb20140807150704/leagueoflegends/images/3/3a/Warwick_Render.png"><input type="radio" name="Plays" value="No" id="42">
<input type="submit" value="Submit">
This is the JavaScript, its supposed to get the answer to the radio buttons, If the radio box is checked it adds '1' to the 'pic' string if not it adds '2'. At the end its supposed to open a window with 'pic' in between 2 strings to form a URL. If I put 'window.open' in the first for loop's else bracket it works for the first 5 numbers (opens 4 tabs).
function getImg()
{
var radio1 = document.getElementsByName('Lane');
var radio2 = document.getElementsByName('Role');
var radio3 = document.getElementsByName('Cheese');
var radio4 = document.getElementsByName('Plays');
var pic = '';
for (var i = 0; i < 6; i++) {
if (radio1[i].checked) {
pic += '1';
}
else {
pic += '2';
}
}
for (var i2 = 0; i2 < 6; i2++)
{
if(radio2[i2].checked)
{
pic += '1';
}
else {
pic += '2';
}
}
for (var i3 = 0; i3 < 2; i3++)
{
if(radio3[i3].checked)
{
pic += '1';
}
else {
pic += '2';
}
}
for (var i4 = 0; i4 < 2; i4++)
{
if(radio4[i4].checked)
{
pic += '1';
}
else {
pic += '2';
}
}
window.open('http://lmetar.com/' + pic + '.png');
}
Thanks in advance for anyone who is able to help me.
You miscounted the number of radioboxes. Don't count yourself, let the computer do it, that's what they are build for!
function getImg() {
var radio1 = document.getElementsByName('Lane');
var radio2 = document.getElementsByName('Role');
var radio3 = document.getElementsByName('Cheese');
var radio4 = document.getElementsByName('Plays');
var pic = '';
for (var i = 0; i < radio1.length; i++) {
// shortcut for your if...else construct
pic += radio1[i].checked ? '1' : '2';
}
for (var i = 0; i < radio2.length; i++) {
pic += radio2[i].checked ? '1' : '2';
}
for (var i = 0; i < radio3.length; i++) {
pic += radio3[i].checked ? '1' : '2';
}
for (var i = 0; i < radio4.length; i++) {
pic += radio4[i].checked ? '1' : '2';
}
window.open('http://lmetar.com/' + pic + '.png');
}
The function document.getElementsByName() returns a list and you can determine the length of it with LIST.length, here: radioX.length.
I'm creating a mini quiz, if the answer is correct the background will be green, if is wrong will be red
here is the code of HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form class="forma">
<div class="pyetja"><h3>1. The flag if Italy which color has..</h3>
<div class="formafoto"><div class="foto"></div><div class="pergjigjet"><div class="pergjigje">
<div class="pergjigjemajtas">
white and blue
</div>
<div class="pergjigjedjathtas" id="0">
<label><input type="radio" value="1" name="0" unchecked="">right</label>
<label><input type="radio" value="0" name="0" unchecked="">wrong</label>
</div>
</div>
<div class="pergjigje">
<div class="pergjigjemajtas">
white and red
</div>
<div class="pergjigjedjathtas" id="1">
<label><input type="radio" value="1" name="1" unchecked="">right</label>
<label><input type="radio" value="0" name="1" unchecked="">wrong</label>
</div>
</div>
<div class="pergjigjeno">
<div class="pergjigjemajtas">
white red and green
</div>
<div class="pergjigjedjathtas" id="2">
<label><input type="radio" value="1" name="2" unchecked="">right</label>
<label><input type="radio" value="0" name="2" unchecked="">wrong</label>
</div>
</div></div></div></div>
<div class="question">
<input id="buton" type="button" value="Finish!" onClick="getScore(this.form); getResult(this.form);">
<p> <strong class="bgclr">Result = </strong><strong><input class="bgclr1" type="text" size="2" name="percentage" disabled></strong><br><br>
<div id="rezultati"></div>
</div>
</form>
</body>
</html>
and javascript
// Insert number of questions
var numQues = 3;
// Insert number of choices in each question
var numChoi = 2;
// Insert number of questions displayed in answer area
var answers = new Array(2);
// Insert answers to questions
answers[0] = 1;
answers[1] = 1;
answers[2] = 1;
// Do not change anything below here ...
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i=0; i<numQues; i++) {
currElt = i*numChoi;
for (j=0; j<numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == answers[i]) {
score++;
}
}
}
}
var radio1 = document.getElementByName("0").value;
if (answers[0] == radio1) {
document.getElementById("0").style.backgroundColor="#00FF00";
} else {
document.getElementById("0").style.backgroundColor="#e83f3f";
}
if(score > 3) {
document.getElementById("rezultati").innerHTML = "Congratulation!";
} else {
document.getElementById("rezultati").innerHTML = "Try again!";
}
form.percentage.value = score;
form.solutions.value = correctAnswers;
}
// End -->
</script>
I get always red background and if the answer is correct, maybe document.getElementByName("0").value is not getting a number to make true the condition
var radio1 = document.getElementByName("0").value;
if (answers[0] == radio1) {
document.getElementById("0").style.backgroundColor="#00FF00";
} else {
document.getElementById("0").style.backgroundColor="#e83f3f";
}
var radio1 = document.getElementByName("0").value;
if (answers[0] == radio1) {
Probably your error is in this line of code, the id="0" is a div and you are trying to get the value of it, this might result into undefined and the value answer[0] is 1, thus 1 is not equal to radio1, thus it is always getting into the else block.