Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Probably an easy one for you lot!

Pendulum
in Frontend

Featured Replies

I do hate Javascript and avoid it, but I must get this little thing done.

 

I've got 25 radio boxes in my form, named from q1 to q25.

 

I wish to run a loop (25 iterations) to check each radio box group in turn, to see if the correct answer has been checked.

 

Here's a snippet of my code:

 

var question = 1;

while (question < 26) { // This will explore all 25 of my Radio Boxes...

 

var buttons = document.rad.q1;

...<snipped the rest of the code, which does work and it does correctly see if an answer is right or wrong>

question++;

}

 

The above line is my trouble. document.rad.q1; means the first radio box will be checked 25 times. But I want to make use of the question variable to check the next radio box in each iteration of the loop.

 

So for example, something like (but this code does not work): var buttons = document.rad.q+question;

 

Hope you can help... otherwise I will have to resort to:

 

if (question == 1) { var buttons = document.rad.q1; }

else if (question == 2) { var buttons = document.rad.q2; }

else if (question == 3) { var buttons = document.rad.q3; }

 

I know that would be terrible code, and very slow. :(

Edited by Pendulum

Could you paste all of your code ?

That would make it easier to see what you mean and to make the code more efficient.

 

Cheers :)

  • Author

OK!

 

<script type="text/javascript">

function Mark() {

var answers = new Array();

answers[1] = 2;answers[2] = 1;answers[3] = 3;answers[4] = 3;answers[5] = 1;answers[6] = 3;answers[7] = 2;answers[8]= 4;answers[9] = 2;answers[10] = 3;answers[11] = 2;answers[12] = 1;answers[13]= 3;answers[14] = 1;answers[15] = 3;answers[16] = 2;answers[17] = 1;answers[18]= 2;answers[19] = 4;answers[20] = 2;answers[21] = 1;answers[22] = 2;answers[23]= 4;answers[24] = 2;answers[25] = 3;

 

var question = 1;

while (question < 26) {

 

var buttons = document.rad.q1; <<<this is the bit that needs changing

for (var i = 0; i < 4; i++) {

var markedCorrect = 0;

if (buttons.checked) {

if (buttons.value == answers) { alert('correct, call function to set this as green'); markedCorrect = 1; }

 

}

if ((i == 3) && (markedCorrect == 0)) { alert('incorrect, call function to set this red'); }

 

}

question++;

}

}

</script>

Edited by Pendulum

  • Author

Sorry, maybe the rest of the code will help.

 

<input type="radio" name="q1" value="1"> Answer 1<br>

<input type="radio" name="q1" value="2"> Answer 2<br>

<input type="radio" name="q1" value="3"> Answer 3<br>

<input type="radio" name="q1" value="4"> Answer 4<br>

 

<input type="radio" name="q2" value="1"> Answer 1<br>

<input type="radio" name="q2" value="2"> Answer 2<br>

<input type="radio" name="q2" value="3"> Answer 3<br>

<input type="radio" name="q2" value="4"> Answer 4<br>

 

etc

 

That's how my HTML radio boxes are set out.

 

var buttons = document.rad.q1; refers to the first radio box group,

But on the second iteration of the loop, I want to refer to the second radio box group (document.rad.q2) - I cannot figure out how, even though I know it'll be an easy solution

 

Something like:

 

var buttons = document.rad.q+question;

 

On the second iteration of the loop, I would have thought that the above line of code would equap var buttons = document.rad.q2 - but it does not work ;(

Edited by Pendulum

If you use classes instead of the name attribute it's going to be a lot easier :

 

fuction Mark()
{
// Set the correct answers.
var answers = [2,1,3,3,1,3,2,4,2,3,2,1,3,1,3,2,1,2,4,2,1,2,4,2,3];


// Setting amount of questions.
var questionsAmount = 26;

// Looping through the questions.
for(i=0;i<questionsAmount;i++)
{

// Get all the elements with a class off q + the value of i
var buttons = document.getElementsByClassName('q'+i);


// Check if the correct radio button is clicked, according to the answer. ( - 1 Because buttons begin with 0 )
if( buttons[ answers[ i  ] - 1 ].checked )
{
// Run code if this question is correct

}
else
{
// Run code if this question is not correct

}

}

}

 

I haven't tested this code, so please don't get mad if it dosen't work right away !

 

Léon :)

Edited by Leonvv

  • Author

Thanks Leon, I could not get that code working though. :(

I've fixed the bugs in my code and achieved what I need to achieve, but in a very ugly way! The below code works and it'll have to do for now unless anyone can help me improve it! I can always come back to it and make it more efficient later (..like that will happen!). :)

 

I'll keep reading the Javascript ebooks and try and improve. Re: jQuery, I think I would find that more difficult as it's just another thing to learn. ;(

 

<script type="text/javascript">

 

function Mark() {

var answers = new Array();

answers[1] = 2;answers[2] = 1;answers[3] = 3;answers[4] = 3;answers[5] = 1;answers[6] = 3;answers[7] = 2;answers[8]= 4;answers[9] = 2;answers[10] = 3;answers[11] = 2;answers[12] = 1;answers[13]= 3;answers[14] = 1;answers[15] = 3;answers[16] = 2;answers[17] = 1;answers[18]= 2;answers[19] = 4;answers[20] = 2;answers[21] = 1;answers[22] = 2;answers[23]= 4;answers[24] = 2;answers[25] = 3;

var question = 1;

while (question < 26) {

if (question == 1) { var buttons = document.rad.q1; }

else if (question == 2) { var buttons = document.rad.q2; }

else if (question == 3) { var buttons = document.rad.q3; }

else if (question == 4) { var buttons = document.rad.q4; }

else if (question == 5) { var buttons = document.rad.q5; }

else if (question == 6) { var buttons = document.rad.q6; }

else if (question == 7) { var buttons = document.rad.q7; }

else if (question == 8) { var buttons = document.rad.q8; }

else if (question == 9) { var buttons = document.rad.q9; }

else if (question == 10) { var buttons = document.rad.q10; }

else if (question == 11) { var buttons = document.rad.q11; }

else if (question == 12) { var buttons = document.rad.q12; }

else if (question == 13) { var buttons = document.rad.q13; }

else if (question == 14) { var buttons = document.rad.q14; }

else if (question == 15) { var buttons = document.rad.q15; }

else if (question == 16) { var buttons = document.rad.q16; }

else if (question == 17) { var buttons = document.rad.q17; }

else if (question == 18) { var buttons = document.rad.q18; }

else if (question == 19) { var buttons = document.rad.q19; }

else if (question == 20) { var buttons = document.rad.q20; }

else if (question == 21) { var buttons = document.rad.q21; }

else if (question == 22) { var buttons = document.rad.q22; }

else if (question == 23) { var buttons = document.rad.q23; }

else if (question == 24) { var buttons = document.rad.q24; }

else if (question == 25) { var buttons = document.rad.q25; }

var markedCorrect = 0;

for (var i = 0; i < 4; i++) {

 

if (buttons.checked) { if (buttons.value == answers[question]) { alert('correct'); markedCorrect = 1; } }

 

if ((i == 3) && (markedCorrect == 0)) { alert('incorrect'); }

}

 

question++;

}

}

</script>

It definitely needs some improvement

 

var answers = new Array();

answers[1] = 2;answers[2] = 1;answers[3] = 3;answers[4] = 3;answers[5] = 1;answers[6] = 3;answers[7] = 2;answers[8]= 4;answers[9] = 2;answers[10] = 3;answers[11] = 2;answers[12] = 1;answers[13]= 3;answers[14] = 1;answers[15] = 3;answers[16] = 2;answers[17] = 1;answers[18]= 2;answers[19] = 4;answers[20] = 2;answers[21] = 1;answers[22] = 2;answers[23]= 4;answers[24] = 2;answers[25] = 3;

 

can be replaced by this:

var answers = [2, 1, 3, 3, 1, 3, 2, 4, 2, 3, 2, 1, 3];

Ok, I didn't put all the numbers, but you get the idea...

 

The if statement can be replaced by a switch http://www.w3schools...s/js_switch.asp

 

while (question < 26) {

 

You can repace this by

while (question < answers.count())

so you don't have to keep track of the number of elements all the time

 

also, you didn't define answers[0] (arrays start with 0) so, you will have an undefined element.

Edited by ocorreiododiogo

  • Author

Thanks very much.

 

This is my final code (fully working in Firefox but does not work in IE, I will try and work out why tomorrow!!); it shows a tick or cross image against each correct or incorrect answer) I've taken on board what you said.

Let me know if you spot any more improvements... I know it's probably still not great. But hey, it works [in Firefox] :)

function Mark() {

document.getElementById('mark').style.display = 'none';
document.getElementById('finalpara').style.display = 'none';
var answers = [0, 2, 1, 3, 3, 1, 3, 2, 4, 2, 3, 2, 1, 3, 1, 3, 2, 1, 2, 4, 2, 1, 2, 4, 2, 3];
var buttons;

for (question=1; question < 26; question++) {

	switch(question)
	{
	case 1: buttons = document.rad.q1; break;
	case 2: buttons = document.rad.q2; break;
	case 3: buttons = document.rad.q3; break;
	case 4: buttons = document.rad.q4; break;
	case 5: buttons = document.rad.q5; break;
	case 6: buttons = document.rad.q6; break;
	case 7: buttons = document.rad.q7; break;
	case 8: buttons = document.rad.q8; break;
	case 9: buttons = document.rad.q9; break;
	case 10: buttons = document.rad.q10; break;
	case 11: buttons = document.rad.q11; break;
	case 12: buttons = document.rad.q12; break;
	case 13: buttons = document.rad.q13; break;
	case 14: buttons = document.rad.q14; break;
	case 15: buttons = document.rad.q15; break;
	case 16: buttons = document.rad.q16; break;
	case 17: buttons = document.rad.q17; break;
	case 18: buttons = document.rad.q18; break;
	case 19: buttons = document.rad.q19; break;
	case 20: buttons = document.rad.q20; break;
	case 21: buttons = document.rad.q21; break;
	case 22: buttons = document.rad.q22; break;
	case 23: buttons = document.rad.q23; break;
	case 24: buttons = document.rad.q24; break;
	case 25: buttons = document.rad.q25; break;
	}
	var markedCorrect = 0;
	for (var i = 0; i < 4; i++) {

		if (buttons[i].checked) {

			if (buttons[i].value == answers[question]) {

				markedCorrect = 1;
				switch(question) {
				case 1: document.getElementById('q1tick').style.display = 'block'; break;
				case 2: document.getElementById('q2tick').style.display = 'block'; break;
				case 3: document.getElementById('q3tick').style.display = 'block'; break;
				case 4: document.getElementById('q4tick').style.display = 'block'; break;
				case 5: document.getElementById('q5tick').style.display = 'block'; break;
				case 6: document.getElementById('q6tick').style.display = 'block'; break;
				case 7: document.getElementById('q7tick').style.display = 'block'; break;
				case 8: document.getElementById('q8tick').style.display = 'block'; break;
				case 9: document.getElementById('q9tick').style.display = 'block'; break;
				case 10: document.getElementById('q10tick').style.display = 'block'; break;
				case 11: document.getElementById('q11tick').style.display = 'block'; break;
				case 12: document.getElementById('q12tick').style.display = 'block'; break;
				case 13: document.getElementById('q13tick').style.display = 'block'; break;
				case 14: document.getElementById('q14tick').style.display = 'block'; break;
				case 15: document.getElementById('q15tick').style.display = 'block'; break;
				case 16: document.getElementById('q16tick').style.display = 'block'; break;
				case 17: document.getElementById('q17tick').style.display = 'block'; break;
				case 18: document.getElementById('q18tick').style.display = 'block'; break;
				case 19: document.getElementById('q19tick').style.display = 'block'; break;
				case 20: document.getElementById('q20tick').style.display = 'block'; break;
				case 21: document.getElementById('q21tick').style.display = 'block'; break;
				case 22: document.getElementById('q22tick').style.display = 'block'; break;
				case 23: document.getElementById('q23tick').style.display = 'block'; break;
				case 24: document.getElementById('q24tick').style.display = 'block'; break;
				case 25: document.getElementById('q25tick').style.display = 'block'; break;
				}
			}
		}

		if ((i == 3) && (markedCorrect == 0)) {

				switch(question) {
				case 1: document.getElementById('q1cross').style.display = 'block'; break;
				case 2: document.getElementById('q2cross').style.display = 'block'; break;
				case 3: document.getElementById('q3cross').style.display = 'block'; break;
				case 4: document.getElementById('q4cross').style.display = 'block'; break;
				case 5: document.getElementById('q5cross').style.display = 'block'; break;
				case 6: document.getElementById('q6cross').style.display = 'block'; break;
				case 7: document.getElementById('q7cross').style.display = 'block'; break;
				case 8: document.getElementById('q8cross').style.display = 'block'; break;
				case 9: document.getElementById('q9cross').style.display = 'block'; break;
				case 10: document.getElementById('q10cross').style.display = 'block'; break;
				case 11: document.getElementById('q11cross').style.display = 'block'; break;
				case 12: document.getElementById('q12cross').style.display = 'block'; break;
				case 13: document.getElementById('q13cross').style.display = 'block'; break;
				case 14: document.getElementById('q14cross').style.display = 'block'; break;
				case 15: document.getElementById('q15cross').style.display = 'block'; break;
				case 16: document.getElementById('q16cross').style.display = 'block'; break;
				case 17: document.getElementById('q17cross').style.display = 'block'; break;
				case 18: document.getElementById('q18cross').style.display = 'block'; break;
				case 19: document.getElementById('q19cross').style.display = 'block'; break;
				case 20: document.getElementById('q20cross').style.display = 'block'; break;
				case 21: document.getElementById('q21cross').style.display = 'block'; break;
				case 22: document.getElementById('q22cross').style.display = 'block'; break;
				case 23: document.getElementById('q23cross').style.display = 'block'; break;
				case 24: document.getElementById('q24cross').style.display = 'block'; break;
				case 25: document.getElementById('q25cross').style.display = 'block'; break;
			 }
		}
	}
}
}
</script>

Edited by Pendulum

One big advantage of jQuery is that it takes care of browser differences for you, the other is that it's really easy to understand and fast to learn.

 

I took a little time to do this in jQuery and you'll see it proves my point ;)

 

 

var answers = [2,1,3,3,1,3,2,4,2,3,2,1,3,1,3,2,1,2,4,2,1,2,4,2,3];

$('input:radio:checked').each(function(){

  var question = $(this).attr('name').substr(1);
  var correct = answers[question - 1];
  var answer = $(this).attr('value');

  alert('Your answer to the question number ' + question + ' is ' + (correct == answer));

});

 

and explained:

 

var answers = [2,1,3,3,1,3,2,4,2,3,2,1,3,1,3,2,1,2,4,2,1,2,4,2,3];

// get only the checked radios, and iterate through each one of them
$('input:radio:checked').each(function(){

  // to get the question number, remove the "q" with substr()
  var question = $(this).attr('name').substr(1);

  // get the corresponding correct answer by passing the question number as index to the array answers
  // we need to subtract 1 to match the index 0
  var correct = answers[question - 1];

  // get the value of the checked radio
  var answer = $(this).attr('value');

  // and compare them. I spiced it up a bit, the part (correct == answer) returns "true" or "false"
  alert('Your answer to the question number ' + question + ' is ' + (correct == answer));

});

Edited by ocorreiododiogo

Thanks Leon, I could not get that code working though. :(

 

Did you change the name attribute to a class attribute ?

 

Léon :)

  • Author

Hi, yes I did and also spotted "fuction" to "function" but nothing happened when I clicked,

I used to have one of those console things that used to tell me what the error was , I think I must get one again!

 

Just for the record I found out why it wouldn't work in IE. This bit: if (buttons.value == answers[question]) {

Would not ever be true in IE, for some reason, I think because it couldn't see question's value. I made question a global variable and now it works fine!

Edited by Pendulum

Create an account or sign in to comment
Go to topic listing

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.