Develop Reference

Making javascript check what radio form has been selected

I am trying to make a dog race.
Basically what I want is to check what radio the user checked,
compare it to a random number between 1 - 5 and see if he won.
My question is... How do I compare them?
This is my code so far.
function chooser(){
var theDogs = ["dog1","dog2","dog3","dog4","dog5"],
rand = theDogs[Math.floor(Math.random() * theDogs.length)];
document.getElementById("winner").innerHTML = rand;
if(pick == rand)
{document.getElementById("winner").innerHTML =("win!");}
else {
document.getElementById("winner").innerHTML =("loose");
}
}
HTML:
<form id="pick" action="rand">
<input type="radio" name="dog" id="dog1">Dog1<br>
<input type="radio" name="dog" id="dog2">Dog2<br>
<input type="radio" name="dog" id="dog3">Dog3<br>
<input type="radio" name="dog" id="dog4">Dog4<br>
<input type="radio" name="dog" id="dog5">Dog5<br>
</form>
<br>
<br>
<input type="submit" value="Gamble" onclick="chooser();">
<br>
<p id="winner"> </p>

A jQuery and Native JavaScript Approach. Take your pick.
$("#submitjq").click(function() {
var theDogs = ["dog1","dog2","dog3","dog4","dog5"],
rand = theDogs[Math.floor(Math.random() * theDogs.length)];
var pick = $("input[type=radio][name='dog']:checked").val();
if(pick == rand)
{
$("#winner").html("jQuery: Won!");
}
else {
$("#winner").html("jQuery: Lost!");
}
});
document.getElementById('submitjs').onclick = function () {
var theDogs = ["dog1","dog2","dog3","dog4","dog5"],
rand = theDogs[Math.floor(Math.random() * theDogs.length)];
var pick = document.pick.dog.value;
console.log(pick);
if(pick == rand)
{
document.getElementById("winner").innerHTML = "JavaScript: Won!" ;
}
else {
document.getElementById("winner").innerHTML = "JavaScript: Lost!" ;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="pick" name="pick" action="rand">
<input type="radio" name="dog" value="dog1">Dog1<br>
<input type="radio" name="dog" value="dog2">Dog2<br>
<input type="radio" name="dog" value="dog3">Dog3<br>
<input type="radio" name="dog" value="dog4">Dog4<br>
<input type="radio" name="dog" value="dog5">Dog5<br>
</form>
<br>
<br>
<input type="submit" id="submitjs" value="Gamble Native JavaScript" />
<input type="submit" id="submitjq" value="Gamble jQuery" />
<br>
<p id="winner"> </p>

You need to give each radio button a value, and then getElementsByName, iterating through to find the one that's checked. See similar thread...

Validation for dynamic radio button,checkbox and text area

I have developed one page,which is contains several questions and answer...there are three types of answer radio button,checkbox and text area... i have to validate these dynamically created questions using javascript...
based on the question type i am getting answer options from database whether it may be a radio button or checkbox or text area...
<input type="radio" id="radio" name="21" value="59"/>
<input type="radio" id="radio" name="22" value="60"/>
<input type="radio" id="radio" name="23" value="61"/>
like same as checkbox and text area....
//try 1
var form = document.getElementById('form1');
var inputs = form.getElementsByTagName('INPUT');
for (var i = 0; i < inputs.length; ++i) {
if (inputs[i].type.toLowerCase == 'radio' && !inputs[i].checked)
return false;
}
return true;
//try 2
var rv = document.getElementsByName("reservation_in");
var ci = -1;
for(var ikj=0; ikj < rv.length; ikj++){
if(rv[ikj].checked) {
ci = ikj;
}
}
if (ci == -1) {
document.getElementById('err_reservation_for').innerHTML="";
document.getElementById('err_reservation_for').innerHTML=
'Please let us know
//Reservation for Inside or Patio.';
return false;
}
//try 3
var radios = document.getElementById('radio');
var formValid = false;
var i = 0;
while (!formValid && i < radios.length) {
if (radios[i].checked)
formValid = true;
i++;
}
if (!formValid)
//document.getElementById('radio_error').innerHTML="";
//document.getElementById('radio_error').innerHTML=
'Please select one answer.';
alert("Please select the answer");
return formValid;

I have some sample code which may help you to understand more.
HTML Code:
<div id="que1" class="que">
xyz is not abc? <br />
<div class="ans">
<input type="radio" name="radioGroup1" id="radio1" />One
<input type="radio" name="radioGroup1" id="radio2" />Two
<input type="checkbox" name="check" id="check1" />Three <br/>
<textarea id="textarea-1"></textarea>
</div>
</div><br />
<div id="que2" class="que">
xyz is not abc? <br />
<div class="ans">
<input type="radio" name="radioGroup2" id="radio3" />One
<input type="radio" name="radioGroup2" id="radio3" />Two
<input type="checkbox" name="check" id="check2" />Three <br />
<textarea id="textarea-2"></textarea>
</div>
</div>
JS Code:
var questions=document.getElementsByClassName("que");
for(var i=0;i<questions.length;i++){
var inputs=questions[i].getElementsByTagName("input");
for(var j=0;j<inputs.length;j++){
if(inputs[j].type=="radio"){
alert("question ID:- "+ questions[i].id+ " radio");
}
if(inputs[j].type=="checkbox"){
alert("question ID:- "+ questions[i].id+ " checkbox");
}
}
var textarea=questions[i].getElementsByTagName("textarea");
for(var k=0;k<textarea.length;k++){
alert("question ID:- "+ questions[i].id+ " Textarea");
}
}
Click here check this fiddle

Radio button validation:
Html:
<form>
<input type="radio" id="21" name="radio" value="59"/>
<input type="radio" id="22" name="radio" value="60"/>
<input type="radio" id="23" name="radio" value="61"/>
</form>
Javascript:
if ( ( form.radio[0].checked == false ) && ( form.radio[1].checked == false ) && ( form.radio[2].checked == false ) ) { alert ( "Please choose one radio button" ); return false; }

If there are many input box then use each..that will iterate just like for loop..
var iz_checked = false;
var is_blank = false;
var is_choose = false;
$('button').on('click', function() {
iz_checked = false;
is_blank = false;
is_choose = false;
$('input[type="radio"]').each(function() {
if ($('input[type="radio"]').is(':checked') == true) {
iz_checked = false;
} else {
iz_checked = true;
}
if ($('textarea')[0].value == "") {
is_blank = true;
}
});
$('input[type="checkbox"]').each(function() {
if ($('input[type="checkbox"]').is(':checked') == true) {
is_choose = false;
} else {
is_choose = true;
}
});
if (is_choose || iz_checked || is_blank) {
alert("Validation err");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" id="21" value="59" />a
<input type="radio" id="22" value="60" />q
<input type="radio" id="23" value="61" />w
<input type="radio" id="1" value="59" />e
<input type="radio" id="2" value="60" />r
<input type="radio" id="3" value="61" />t
<input type="radio" id="29" value="59" />y
<input type="radio" id="80" value="60" />u
<input type="radio" id="7" value="61" />i
<input type="radio" id="8" value="59" />o
<input type="radio" id="0" value="60" />p
<input type="radio" id="1" value="61" />l
</form>
<textarea cols="10" rows="10"></textarea>
<br/>
<input type="checkbox" value="Apples">f
<input type="checkbox" value="Apples">d
<input type="checkbox" value="Apples">s
<input type="checkbox" value="Apples">a
<br/>
<button>
Validate
</button>

javascript Using cookie to pass variables to another page

I'm using javascript for the first time and am trying to pass variables to another page via a cookie. However it doesn't appear to be working. Right now I'm just trying to check the cookie value using an alert box. I've looked but haven't been able to find anything that can help me figure out what's going wrong. I was originally trying to implement the solution from this page: How to use JavaScript to fill a form on another page
Any help is appreciated.
My code for the first page is:
<!DOCTYPE html>
<html lang="en">
<!--Matt Proctor -->
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet/less" type="text/css" href="dealership.less">
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<script>
//validate name
function checkName() {
var lastN = document.getElementById('lName').value;
var firstN = document.getElementById('fName').value;
if (lastN == "" || firstN == "" || (/[^A-Za-z]/.test(lastN)) || (/[^A-Za-z]/.test(firstN))) {
window.alert("Please enter ONLY alphabetical characters for First Name AND Last Name");
return false;
}
else{
return true;
}
}
//check if q1 answered
function checkQ1() {
if (document.getElementById('timeButton1').checked == false
&& document.getElementById('timeButton2').checked == false
&& document.getElementById('timeButton3').checked == false
&& document.getElementById('timeButton4').checked == false
&& document.getElementById('timeButton5').checked == false) {
window.alert("Please answer question 1");
return false;
}
else{
return true;
}
}
//check if q2 answered
function checkQ2() {
if (document.getElementById('vehicleButton1').checked == false
&& document.getElementById('vehicleButton2').checked == false
&& document.getElementById('vehicleButton3').checked == false
&& document.getElementById('vehicleButton4').checked == false
&& document.getElementById('vehicleButton5').checked == false
&& document.getElementById('vehicleButton6').checked == false
&& document.getElementById('vehicleButton7').checked == false
&& document.getElementById('vehicleButton8').checked == false
&& document.getElementById('vehicleButton9').checked == false
&& document.getElementById('vehicleButton10').checked == false
&& document.getElementById('vehicleButton11').checked == false) {
window.alert("Please answer question 2");
return false;
}
else{
return true;
}
}
//validate q3
function checkQ3() {
var min = document.getElementById('minPriceText').value;
var max = document.getElementById('maxPriceText').value;
if (min == "" || (/[^0-9]/.test(min)) || max == "" || (/[^0-9]/.test(max))) {
window.alert("Please enter a numerical value for both the minimum price and maximum price");
return false;
}
else{
return true;
}
}
//check q4 answered
function checkQ4() {
if (document.getElementById('problemsNo').checked == false
&& document.getElementById('problemsYes').checked == false) {
window.alert("Please answer question 4");
return false;
}
else {
return true;
}
}
//check q5 answered
function checkQ5() {
if (document.getElementById('cleanNo').checked == false
&& document.getElementById('cleanYes').checked == false) {
window.alert("Please answer question 5")
return false;
}
else {
return true
}
}
//check q6 answered
function checkQ6() {
if (document.getElementById('gasNo').checked == false
&& document.getElementById('gasYes').checked == false) {
window.alert("Please answer question 6")
return false;
}
else {
return true;
}
}
//check q7 answered
function checkQ7() {
if (document.getElementById('experience1').checked == false
&& document.getElementById('experience2').checked == false
&& document.getElementById('experience3').checked == false
&& document.getElementById('experience4').checked == false
&& document.getElementById('experience5').checked == false
&& document.getElementById('experience6').checked == false
&& document.getElementById('experience7').checked == false
&& document.getElementById('experience8').checked == false
&& document.getElementById('experience9').checked == false
&& document.getElementById('experience10').checked == false) {
window.alert("Please answer question 7")
return false;
}
else {
return true;
}
}
//check if all data correct, and then attempt to pass to another webpage via cookie.
function checkAndPass() {
var nameCorrect, q1Correct, q2Correct, q3Correect, q4Correct, q5Correct, q6Correct, q7Correct;
nameCorrect = checkName();
q1Correct = checkQ1();
q2Correct = checkQ2();
q3Correct = checkQ3();
q4Correct = checkQ4();
q5Correct = checkQ5();
q6Correct = checkQ6();
q7Correct = checkQ7();
if(nameCorrect==true &&
q1Correct==true &&
q2Correct==true &&
q3Correct==true &&
q4Correct==true &&
q5Correct==true &&
q6Correct==true &&
q7Correct==true) {
var name = document.getElementById('fName').value + " " + document.getElementById('lName').value;
var quest1 = document.querySelector('input[name = "Q1"]:checked').value;
var quest2 = document.querySelector('input[name = "Q2"]:checked').value;
var quest3 = document.getElementById('minPriceText').value + "-" + document.getElementById('maxPriceText').value;
var quest4 = document.querySelector('input[name = "Q4"]:checked').value;
var quest5 = document.querySelector('input[name = "Q5"]:checked').value;
var quest6 = document.querySelector('input[name = "Q6"]:checked').value;
var quest7 = document.querySelector('input[name = "Q7"]:checked').value;
var commentline = document.getElementById('comments').value;
document.cookie=name + "," + quest1 + "/" + quest2 + "/" + quest3 + "/" + quest4 + "/" + quest5 "/" + quest6 + "/" + quest7 + "/" + commentline + "; path=/lab5summary.html";
newSummary();
}
}
function newSummary() {
window.open('lab5summary.html',
'_blank');
}
</script>
<img class="displaycenter" src="AcuraLogo.png" alt="Acura Logo">
<h1 align ="center">After Purchase Customer Survey</h1>
<div class="customer">
<h4>Customer Information</h4>
<br>
<br>
First name:<br>
<input id="fName" type="text" name="firstname" value="">
<br>
Last name:<br>
<input id="lName" type="text" name="lastname" value="">
</div>
<br><br>
<!--Question 1 asking about how long a customer had to wait before an employee assisted them-->
<div class="border">
<p> Q1: What was your approximate wait time before an associate was available to assist you?</p>
<input id="timeButton1" type="radio" class ="larger" name="Q1" value=".25">15 minutes or less.
<input id="timeButton2" type="radio" class ="larger" name="Q1" value=".5">30 minutes.
<input id="timeButton3" type="radio" class ="larger" name="Q1" value=".75">45 minutes.
<input id="timeButton4" type="radio" class ="larger" name="Q1" value="1">1 hour.
<input id="timeButton5" type="radio" class ="larger" name="Q1" value="1.5">1 and 1/2 hours or more.
<p> Q2: What kind of vehicle(s) were you looking for?</p>
<input id="vehicleButton1" type="checkbox" class ="larger" name="Q2" value="Sedan"> Sedan
<input id="vehicleButton2" type="checkbox" class ="larger" name="Q2" value="SUV/Crossover"> SVU/Crossover
<input id="vehicleButton3" type="checkbox" class ="larger" name="Q2" value="Convertible"> Convertible
<input id="vehicleButton4" type="checkbox" class ="larger" name="Q2" value="Coupe"> Coupe
<input id="vehicleButton5" type="checkbox" class ="larger" name="Q2" value="Hatchback"> Sedan
<input id="vehicleButton6" type="checkbox" class ="larger" name="Q2" value="Hybrid/Electric"> Hybrid/Electric
<input id="vehicleButton7" type="checkbox" class ="larger" name="Q2" value="Luxury"> Luxury
<input id="vehicleButton8" type="checkbox" class ="larger" name="Q2" value="Van/Minivan"> Van/Minivan
<input id="vehicleButton9" type="checkbox" class ="larger" name="Q2" value="Truck"> Truck
<input id="vehicleButton10" type="checkbox" class ="larger" name="Q2" value="Wagon"> Wagon
<input id="vehicleButton11" type="checkbox" class ="larger" name="Q2" value="AWD/4WD"> AWD/4WD
<p> Q3: What price range were looking for in a vehicle? </p>
Minimum: $
<input id="minPriceText" type="text" name="minprice" value="">
Maximum: $
<input id="maxPriceText" type="text" name="minprice" value="">
<p> Q4: Did the vehicle(s) purchased have any problems?</p>
<input id="problemsNo" type="radio" class ="larger" name="Q4" value="Yes">Yes
<input id="problemsYes" type="radio" class ="larger" name="Q4" value="No">No
<p> Q5: Was the interior of the vehicle clean? </p>
<input id="cleanYes" type="radio" class ="larger" name="Q5" value="Yes">Yes
<input id="cleanNo" type="radio" class ="larger" name="Q5" value="No">No
<p> Q6: Did the vehicle come with a full tank of gas? </p>
<input id="gasYes" type="radio" class ="larger" name="Q6" value="Yes">Yes
<input id="gasNo" type="radio" class ="larger" name="Q6" value="No">No
<p> Q7: On the scale from 1 to 10, 1 being extremely unpleasant and
10 being absolutely perfect, how would you rate your overall experience? </p>
<input id="experience1" type="radio" class ="larger" name="Q7" value="1">1
<input id="experience2" type="radio" class ="larger" name="Q7" value="2">2
<input id="experience3" type="radio" class ="larger" name="Q7" value="3">3
<input id="experience4" type="radio" class ="larger" name="Q7" value="4">4
<input id="experience5" type="radio" class ="larger" name="Q7" value="5">5
<input id="experience6" type="radio" class ="larger" name="Q7" value="6">6
<input id="experience7" type="radio" class ="larger" name="Q7" value="7">7
<input id="experience8" type="radio" class ="larger" name="Q7" value="8">8
<input id="experience9" type="radio" class ="larger" name="Q7" value="9">9
<input id="experience10" type="radio" class ="larger" name="Q7" value="10">10
<p> Finally please feel free to leave any other comments about your purchase/purchase-process below: </p>
<input id="comments" type="textbox" name="comments" value="" size="100">
</div>
<br>
<br>
<input onclick="checkAndPass()" id="submitButton" class="button1" type="submit" value="Submit">
</body>
</html>
The code of the page I'm passing to is:
<!DOCTYPE html>
<html lang="en">
<!--Matt Proctor -->
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet/less" type="text/css" href="dealership.less">
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<script>
var COOKIES = {};
var cookieStr=document.cookie;
window.alert("Cookie: " + cookieStr);
</script>
<img class="displaycenter" src="AcuraLogo.png" alt="Acura Logo">
<h1 align ="center">After Purchase Customer Survey Summary</h1>
<div class="border">
<p> Q1: What was your approximate wait time before an associate was available to assist you?</p>
<p> Q2: What kind of vehicle(s) were you looking for?</p>
<p> Q3: What price range were looking for in a vehicle? </p>
Minimum: $
Maximum:
<p> Q4: Did the vehicle(s) purchased have any problems?</p>
<p> Q5: Was the interior of the vehicle clean? </p>
<p> Q6: Did the vehicle come with a full tank of gas? </p>
<p> Q7: On the scale from 1 to 10, 1 being extremely unpleasant and
10 being absolutely perfect, how would you rate your overall experience? </p>
<p> Finally please feel free to leave any other comments about your purchase/purchase-process below: </p>
</div>
</body>
</html>
Also, for some reason firefox web console seems to think I need to place a semi-colon here in the first page after quest5:
document.cookie=name + "," + quest1 + "/" + quest2 + "/" + quest3 + "/" + quest4 + "/" + quest5 "/" + quest6 + "/" + quest7 + "/" + commentline + "; path=/lab5summary.html";
As a final note, I can only use javascript for this, not jQuery or PHP.

In your example is missing a plus sign:
+ quest5+"/" + quest6
Cookies are bound by a domain, so if you open from your file system (e.g file://index.html), it won't work.
If you are on modern browsers, I suggest you use localStorage and sessionStorage.
sessionStorage lasts as long as the page is open and localStorage until the browser's cache be cleaned.

You can also use store.js
Store.js
And you also probably want to expurge your code by using objects and arrays for ids and variables.

How do I take the values of a Radio Button to a new page, after i have checked if they are correct?

I am making a questionnaire and am not brilliant with JS. I want to take the results of the radio buttons which have been marked, so either True or False, and then show them on another page. I have the questions in a form.
CODE:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styling/style.css">
<title>1</title>
</head>
<body>
<script>
function sendclick() {
var answers = [document.forms["questionarre"]["clickRule"].value,
document.forms["questionarre"]["404error"].value,
document.forms["questionarre"]["colour"].value,
document.forms["questionarre"]["H2Tag"].value,
document.forms["questionarre"]["SiteMap"].value,
document.forms["questionarre"]["heading"].value,
document.forms["questionarre"]["alttag"].value,
document.forms["questionarre"]["UseAgain"].value];
var count = 0
for (var i = 0; i<answers.length; i++) {
if (answers[i] == "") {
var temp = i+1;
alert("Please complete question "+temp);
break;
}
count++;
}
if (count == answers.length) {
var correct = [document.getElementById("correct1").checked,
document.getElementById("correct2").checked,
document.getElementById("correct3").checked,
document.getElementById("correct4").checked,
document.getElementById("correct5").checked,
document.getElementById("correct6").checked];
//window.open("YourResults.html", "_self")
}
}
/*
for (var i = 0; i<x.length; i++) {
if (x[i] == "") {
var temp = i+1;
// alert("results"+x)//window.open("results"+x);
break;}
}
}function - sendClick end
function opener() {
var text = document.getElementById('correct7').value;
var target = {
non text content : alert("correct")
};
if (text in targetNames) {
window.open(targetNames[text]);
}
}
document.getElementById('name').addEventListener('keyup', opener, false);
*/
</script>
<div id="questionarre_bg">
<form name="questionarre" action="" method="post">
<div id="Question1">
<p class="thicker">How many clicks do developers use to keep the user close to information? </p>
<input type="radio" name="clickRule" value=1>1<br>
<input type="radio" name="clickRule" value=4>4
<input type="radio" name="clickRule" id="correct1" value=3>3<br>
<input type="radio" name="clickRule" value=6>6
</div>
<div id="Question2">
<p class="thicker">How are developers using the 404 Error Page, for keep the users happy?</p>
<input type="radio" name="404error" id="correct2" value="Including links">Including links<br>
<input type="radio" name="404error" value="displaying a video">displaying a video<br>
<input type="radio" name="404error" value="playing music">playing music<br>
</div>
<div id="Question3">
<p class="thicker">Should you rely on colour alone in a website build?</p>
<input type="radio" name="colour" value="Yes">Yes<br>
<input type="radio" name="colour" id="correct3" value="No">No
</div>
<div id="Question4">
<p class="thicker">A H2 Tag is useful for?</p>
<input type="radio" name="H2Tag" id="correct4" value="The disabled autoreaders">The disabled autoreaders<br>
<input type="radio" name="H2Tag" value="Pretty webpages">Pretty webpages<br>
</div>
<div id="Question5">
<p class="thicker" >What is correct name given to page of the websites pages?</p>
<input type="radio" name="SiteMap" value="Tube Map">Tube Map
<input type="radio" name="SiteMap" id="correct5" value="Site Map">Site Map <br>
<input type="radio" name="SiteMap" value="Map">Map
<input type="radio" name="SiteMap" value="Page List">Page List
</div>
<div id="Question6">
<p class="thicker">A webpage heading should do what?</p>
<input type="radio" name="heading" id="correct6" value="Tell the user about the content in a few words">Tell the user about the content in a few words<br>
<input type="radio" name="heading" value="include meaningless text">include meaningless text<br>
<input type="radio" name="heading" value="Be short">Be short<br>
</div>
<div id="Question7">
<p class="thicker">The Alt tag is used for what....</p>
<input type="text" name="alttag" id="correct7" ><br><!--ANSWER__non text content-->
</div>
<div id="Question8">
<p class="thicker">Would you use this website again for information?</p>
<input type="radio" name="UseAgain" value="Yes">Yes<br>
<input type="radio" name="UseAgain" value="No">No<br>
<textarea rows="4" cols="50"></textarea>
</div>
</form>
<button onclick="sendclick()">send</button>
</div>
</div>
</body>
</html>

you could pass the answer through local storage
it would be something like this
//save the info on page 1
//resultArr will be the array holding all the radio results,
//you could get them by jQuery or any other method to you are comfortable with
localStorage.setItem("answers", answers);
// Retrieve the info on page 2
document.getElementById("answer1").innerHTML = localStorage.getItem("answers")[0];
you can read more about it here:
http://www.w3schools.com/html/html5_webstorage.asp

Printing JavaScript Quiz Results on a new page on clicking submit

On clicking submit I want the score and the correct answers to be printed on a new page. Right now the score pops up on an alert box. How can this be done in HTML/JavaScript ?
The code for my quiz application is :
<html>
<head>
<title>Quizzer</title>
<style type="text/css">
body {
background:#E3E1DC;
font-size:16px;
font-family:Helvetica, Arial;
line-height:1.2em;
color:#222222;
}
pre {
font-family:Consolas, Courier;
font-size: 12px;
color:#444444;
line-height:12px;
margin-left:30px;
margin-top:-28px;
}
.instructions {
margin-left:25px;
}
.button {
margin-left:10px;
margin-bottom:120px;
width:200px;
height:50px;
}
.question {
background:#F1E6D4;
padding:15px;
margin:10px;
}
.odd {
background:#9F9694;
}
.wrong {
border-left:#BA3D49 5px solid;
padding-left:10px;
}
</style>
<script langauge="JavaScript">
// number of questions in the quiz, this must be set exactly
var totalQuestions = 5;
// arrays to store answers, and user submited answers.
var answers = new Array;
var userAnswers = new Array;
// quiz answers
answers[1] = "B";
answers[2] = "C";
answers[3] = "D";
answers[4] = "D";
answers[5] = "B";
// sets the users answer selection to the appropriate array element
// in the userAnswers array.
// questionNumber is the question div id as well as the userAnswers
// array element index to store the answer in.
// answerSelection is the value of the selected answer from a question
function SetAnswer(questionNumber, answerSelection) {
userAnswers[questionNumber] = answerSelection;
}
// applies the .wrong class styling to any question div that is incorrect
function MarkIncorrectQuestions() {
for(i = 1; i <= totalQuestions; i++) {
if(answers[i] != userAnswers[i]) {
document.getElementById(i).className += " wrong";
}
}
}
// counts the number of correct answers
// returns the number of correct answers
function GetScore() {
var score = 0;
for(i = 1; i <= totalQuestions; i++) {
if(userAnswers[i] == answers[i])
score++;
}
return score;
}
// sets classes for each question div to its default styling.
function ApplyDefaultQuestionStyles() {
for(i = 1; i <= totalQuestions; i++) {
if(i % 2 == 0) {
document.getElementById(i).className = "question";
}
else {
document.getElementById(i).className = "question odd";
}
}
}
// calls all appropriate functions in order to check answers and mark
// incorrect questions.
function CheckQuiz() {
ApplyDefaultQuestionStyles();
var totalQuestions = '5';
var score = GetScore();
MarkIncorrectQuestions();
alert("You scored: " + score + " out of " + totalQuestions + ".");
//document.write("<h1>hello</h1>");
}
function result(score,totalQuestions){
document.write("Score" +score);
}
</script>
</head>
<body onLoad="ApplyDefaultQuestionStyles()">
<div class="instructions">
<h1>The Movie Quiz</h1>
</div>
<form>
<div id="1">
<p><strong>Question 1</strong></p>
<p>Where does “It’s a Wonderful Life” take place?</p>
<p><input type="radio" value="A" onClick="SetAnswer(1, this.value)" name="radiobutton2">Bedford Hills</p>
<p><input type="radio" value="B" onClick="SetAnswer(1, this.value)" name="radiobutton2">Bedford Falls</p>
<p><input type="radio" value="C" onClick="SetAnswer(1, this.value)" name="radiobutton2">Bedford Lake</p>
<p><input type="radio" value="D" onClick="SetAnswer(1, this.value)" name="radiobutton2">Bedford City</p>
</div>
<div id="2">
<p><strong>Question 2</strong></p>
<p>In “The Godfather,” who was murdered in the causeway?</p>
<p><input type="radio" value="A" onClick="SetAnswer(2, this.value)" name="radiobutton2">Luca Brasi</p>
<p><input type="radio" value="B" onClick="SetAnswer(2, this.value)" name="radiobutton2">Moe Greene</p>
<p><input type="radio" value="C" onClick="SetAnswer(2, this.value)" name="radiobutton2">Sonny</p>
<p><input type="radio" value="D" onClick="SetAnswer(2, this.value)" name="radiobutton2">Paulie</p>
</div>
<div id="3">
<p><strong>Question 3</strong></p>
<p>Where did Princess Leia hide the stolen plans for the Death Star?</p>
<p><input type="radio" value="A" onClick="SetAnswer(3, this.value)" name="radiobutton2">In C-3PO</p>
<p><input type="radio" value="B" onClick="SetAnswer(3, this.value)" name="radiobutton2">In a pocket in the hem of her white gown</p>
<p><input type="radio" value="C" onClick="SetAnswer(3, this.value)" name="radiobutton2">In the Millennium Falcon</p>
<p><input type="radio" value="D" onClick="SetAnswer(3, this.value)" name="radiobutton2">In R2-D2</p>
</div>
<div id="4">
<p><strong>Question 4</strong></p>
<p>In which of the following films did Robert Duvall NOT appear?</p>
<p><input type="radio" value="A" onClick="SetAnswer(4, this.value)" name="radiobutton2">To Kill a Mockingbird</p>
<p><input type="radio" value="B" onClick="SetAnswer(4, this.value)" name="radiobutton2">The Godfather</p>
<p><input type="radio" value="C" onClick="SetAnswer(4, this.value)" name="radiobutton2">Tender Mercies</p>
<p><input type="radio" value="D" onClick="SetAnswer(4, this.value)" name="radiobutton2">One Flew Over the Cuckoo’s Nest</p>
</div>
<div id="5">
<p><strong>Question 5</strong></p>
<p>Who was Scarlett O’Hara’s second husband?</p>
<p><input type="radio" value="A" onClick="SetAnswer(5, this.value)" name="radiobutton2">Frank Kennedy</p>
<p><input type="radio" value="B" onClick="SetAnswer(5, this.value)" name="radiobutton2">Rhett Butler</p>
<p><input type="radio" value="C" onClick="SetAnswer(5, this.value)" name="radiobutton2">Ashley Wilkes</p>
<p><input type="radio" value="D" onClick="SetAnswer(5, this.value)" name="radiobutton2">Charles Hamilton</p>
</div>
<p>
<input type="submit" class="ui-button" onClick="CheckQuiz()" value="Submit Answers" name="submitButton" class="button"></p>
</form>
</body>

You have two options instead of using an alert ...
1) Create a layered popup that pops up in front of all your page content (you could darken the BG as well like most modals do). This would allow you to pop the message up in the same page and not require the user to open another window.
2) Your other option would be to popup a new window and use javascript to write the information to that window. See the following link for more information on this: http://www.electrictoolbox.com/write-content-dynamic-javascript-popup/
I personally would go with the first because it guarantees that it will work even if the user has a popup blocker.