www.webdeveloper.com
Results 1 to 8 of 8

Thread: I'm lost, Could anyone help me with my cw please

  1. #1
    Join Date
    Dec 2013
    Posts
    4

    I'm lost, Could anyone help me with my cw please

    Hello All!
    I am trying to complete my coursework and I am lost. I have 3 html files (introduction, questions and results). I am supposed to create a javascript quiz, one question per page and on the result page the result (score) should be displayed. My problem: I am getting result on the same page where I have questions, not on the result page. Could anyone help me please and modify my html and/or .js files please? I have two .css files as well. Thanks alot, Alexandra
    <!DOCTYPE html>
    <html>
    <head>
    <title>Introduction</title>
    <link rel="stylesheet" href="../css/alexandra.css" type="text/css">
    </head>
    <body>
    <h1>Welcome to the JavaScript Quiz!</h1>
    <a href="Questions.html">
    <img src="../images/start.jpg" width="100" height="100" border="0">
    </a>
    </body>
    </html>

    <!DOCTYPE html>
    <html>
    <head>
    <title>Questions</title>
    <link rel="stylesheet" href="../css/zdenka.css" type="text/css">
    </head>
    <body>
    <h1>Good Luck!</h1>
    <div id="quiz1" class="quiz"></div>


    <a href="Result.html">
    <img src="../images/result.jpg" width="100" height="100">
    </a>
    <script src="../js/firstj.js" type="text/javascript"></script>
    <script src="../js/second.js" type="text/javascript"></script>
    </body>
    </html>

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Results</title>
    <link href="../css/result.css" rel="stylesheet">


    </head>
    <body>
    <div class="wrapper">
    <div class="header">
    <h1>Please, choose the group and know more about your result</h1>
    </div>
    <div class="content">
    <div id="main">

    <h2>Score 0 - 8</h2>

    <div class="answer">
    <p>You should learn more about the JavaScript </p>
    </div>

    <h2>Score 9 - 15</h2>

    <div class="answer">
    <p>Well done! Practice makes perfect, try again.</p>
    </div>

    <h2>Score 16 - 20</h2>

    <div class="answer">
    <p>Perfect!</p>
    </div>
    </div>

    </div>

    <script src="../js/jquery-1.10.2.min.js"></script>

    <script>
    $(document).ready(function() {
    $(".answer").hide();
    $('#main').find('h2').click(function(e) {
    var
    self = $(this),
    answer = $(this).next(".answer");
    if (
    answer.is(":visible")) {
    answer.fadeOut();
    self.removeClass('close');
    } else {
    answer.fadeIn();
    self.addClass('close');
    }
    });
    } );
    </script>
    </body>


    </html>

    (function(quizArray,qpp,reslink) {
    var perPage = 0; var n1 = 109;
    var n2 = 13;
    var reslink = '';
    var qsParm = [];
    function qs()
    {var query = window.location.search.substring(1);
    var parms = query.split('&');
    for (var i=0; i<parms.length; i++) {
    var pos = parms[i].indexOf('=');
    if (pos > 0) {
    var key = parms[i].substring(0,pos);
    var val = parms[i].substring(pos+1);
    qsParm[key] = val;
    }}}
    qsParm['qnum'] = 0;
    qsParm['cor'] = 0;
    qsParm['fin'] = 0;
    qs();
    var qnum = qsParm['qnum'];
    var cor = qsParm['cor'];
    cor=cor%n1;
    function loadQuiz() {
    if (qnum>=quizArray.length) displayResult();
    else {displayQuiz(ent = document.getElementById('quiz1'),qnum++);
    for(var j=2; j <= qpp; j++) {
    if ((ent = document.getElementById('quiz'+j)) && qnum<quizArray.length) displayQuiz(ent,qnum++);}
    var newB = document.createElement("button");
    newB.style.styleFloat = 'right';
    newB.style.cssFloat = 'right';
    newB.onclick = function() {
    nextPage(qnum);
    return false;
    };
    var newTb = document.createTextNode('Next >>');
    newB.appendChild(newTb);
    ent.appendChild(newB);
    }}
    function displayQuiz(ent,qnum) {
    perPage++; var qna = quizArray[qnum].split('~');
    var newF = document.createElement("form");
    var newDq = document.createElement("div");
    newDq.className = 'question';
    newDq.appendChild(document.createTextNode(Number(qnum+1)+ ': ' +qna[2]));
    newF.appendChild(newDq);
    newDq = document.createElement("div");
    newDq.className = 'answers';
    for (var i = 3;
    qna[i] != null && qna[i] != ''; i++) {
    var newDa = document.createElement("label");
    newDa.htmlFor = 'a'+qnum+i; /*@cc_on @if (@_jscript) var newR = document.createElement("<input name='a"+qnum+"'>"); @else */ var newR = document.createElement("input"); newR.name = 'a'+qnum; /* @end @*/ newR.type = 'radio'; newR.id = 'a'+qnum+i; newR.value = i; newDa.appendChild(newR); newDa.appendChild(document.createTextNode(' '+qna[i]+' ')); newDq.appendChild(newDa);} newF.appendChild(newDq); document.getElementById('quiz'+perPage).appendChild(newF);}
    function displayResult() {
    var newP = document.createElement("p");
    newP.style.textAlign = 'center';
    var newB = document.createElement("b");
    newB.appendChild(document.createTextNode('Congratulations.'));
    newB.appendChild(document.createElement("br"));
    newB.appendChild(document.createTextNode(' You have completed the quiz.'));
    newP.appendChild(newB); newP.appendChild(document.createElement("br"));
    newP.appendChild(document.createElement("br"));
    newP.appendChild(document.createTextNode('You answered ' + cor + ' of the ' + qnum + ' questions correctly.'));
    if (reslink != '') {
    newP.appendChild(document.createElement("br"));
    newA = document.createElement("a");
    newA.href=reslink + '?cor='+cor+'&qnum='+qnum;
    newA.appendChild(document.createTextNode('Find Out More'));
    newP.appendChild(newA);}
    document.getElementById('quiz1').appendChild(newP);
    var newC = document.createElement("button");
    newC.style.styleFloat = 'right';
    newC.onclick = function() {
    cor = 0;
    nextPage(0);
    return false;
    };
    newC.appendChild(document.createTextNode('Try Again'));
    document.getElementById('quiz1').appendChild(newC);
    }
    function checkAnswer(e,b,g,q){
    var a = -1; var x = (b%n2) + 2;
    for (var i=3; document.getElementById(e+i); i++) {
    if (document.getElementById(e+i).checked) {
    a = i-3;
    }}
    var c = (g%x); return a == c?1:0;}
    function nextPage(qnum) {
    for (var i=qnum-perPage; i < qnum; i++) {
    var qna = quizArray[i].split('~');
    cor += checkAnswer('a'+i,qna[1],qna[0],i);
    }
    var thispage = self.location.href;
    var www = thispage.lastIndexOf('?');
    if (www != -1) thispage = thispage.substr(0,www);
    var p = Math.floor((Math.random() * 8) + 2);
    var m = (p * n1) +cor;
    var nxt = thispage + '?qnum='+ qnum +'&cor='+m;
    if (qnum >= quizArray.length) nxt += '&fin=1';
    top.location.href = nxt;}
    loadQuiz();
    })
    (quizArray,qpp,reslink);

    var quizArray = [
    '37~70~Variables declared outside a function, become~Local variables~International variables~Global variables~Universe variables',
    '43~84~If you add a number and a string, the result will be~number~error~number + string~string',
    '8~28~In JavaScript, different kinds of Loop are~for~for/in~while~for/out',
    '18~33~JavaScript can be used to validate data in HTML forms before sending off the content to a server.~True~False',
    '36~93~JavaScript is~prototype based language~class based language~ID based language~all of above',
    '17~58~The Array object is used to store~single value~multiple values~candies~bananas',
    '120~76~What is the DOM?~Difficult Objet Model~Document Open Model~Document Object Mouse~Document Object Model',
    '50~69~Where is the correct place to insert a JavaScript?~The < head > section~The < body > section~Both of them are correct~none',
    '26~32~How do you create a variable "x" that is equal to the integer 4?~int x = 4;~num x = 4;~var x = 4;~number x =4;',
    '54~98~The window object represents~an open window in a browser~closed window in a browser~an open window in a room~closed window in a room',
    '105~76~JavaScript is not widely supported.~True~False'
    ];
    var qpp = 1;
    var reslink = "";

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,204
    Try using forum tags on your code, it helps people help you...
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Nov 2012
    Location
    Jakarta
    Posts
    42
    The key here is to have a storage for the results per page.

    To my understanding, Javascript does have storage. But the storage cannot be moved between pages.

    The way I see it, there are two ways to do this:

    1. Use HTML5
    HTML5 do have persistent storage that can be used between pages.

    2. Use one page to host all the question and results.
    It is possible to do this using Javascript alone. Or use JQuery. Simply show and hide the div containing the question and result.

    Good luck!

  4. #4
    Join Date
    Nov 2012
    Location
    Jakarta
    Posts
    42
    A working example of a one page quiz showing what looks like three different pages:
    Code:
    <html>
    	<head>
    		<title>Javascript Quiz</title>
    	</head>
    	<body>
    		<div id='intro'>
    			Hello and welcome to javascript quiz!
    			Click next to continue.
    			<a href="#" onclick=showQuestion();>NEXT</a>
    		</div>
    		<div id='question'>
    			Question:
    			<form>
    				question 1:<br />
    				<input type="radio" name="question1" value="1">1</input>
    				<input type="radio" name="question1" value="2">2</input>
    				<br />
    				question 2:<br />
    				<input type="radio" name="question2" value="1">1</input>
    				<input type="radio" name="question2" value="2">2</input>
    				<br />
    			</form>
    			Click see result to continue.
    			<a href="#" onclick=showResult();>SEE RESULT</a>
    		</div>
    		<div id='result'>
    			Result
    			<span id='quizresult'>0</span>
    			Click redo to redo the quiz.
    			<a href="#" onclick=showIntro();>REDO</a>
    		</div>
    
    		<script type='text/javascript'>
    			intro = document.getElementById('intro');
    			intro.style.display = 'block';
    			question = document.getElementById('question');
    			question.style.display = 'none';
    			result = document.getElementById('result');
    			result.style.display = 'none';
    
    			function showQuestion()
    			{
    				intro = document.getElementById('intro');
    				intro.style.display = 'none';
    				question = document.getElementById('question');
    				question.style.display = 'block';
    			}
    
    			function showResult()
    			{
    				processQuiz();
    
    				question = document.getElementById('question');
    				question.style.display = 'none';
    				result = document.getElementById('result');
    				result.style.display = 'block';
    			}
    
    			function showIntro()
    			{
    				result = document.getElementById('result');
    				result.style.display = 'none';
    				intro = document.getElementById('intro');
    				intro.style.display = 'block';
    			}
    
    			function processQuiz()
    			{
    				total = 0;
    				value1 = 0;
    				value2 = 0;
    
    				answer1 = document.getElementsByName('question1');
    				for (var i = 0, length = answer1.length; i < length; i++) {
    				    if (answer1[i].checked) {
    				        // do whatever you want with the checked radio
    				        value1 = answer1[i].value;
    				
    				        // only one radio can be logically checked, don't check the rest
    				        break;
    				    }
    				}
    
    				answer2 = document.getElementsByName('question2');
    				for (var i = 0, length = answer2.length; i < length; i++) {
    				    if (answer2[i].checked) {
    				        // do whatever you want with the checked radio
    				        value2 = answer2[i].value;
    				
    				        // only one radio can be logically checked, don't check the rest
    				        break;
    				    }
    				}
    
    
    				total = parseInt(value1) + parseInt(value2);
    
    				result = document.getElementById('quizresult');
    				result.innerHTML = total;
    			}
    
    		</script>
    
    	</body>
    </html>

  5. #5
    Join Date
    Dec 2013
    Posts
    4
    Quote Originally Posted by firesnaker View Post
    A working example of a one page quiz showing what looks like three different pages:
    Code:
    <html>
    	<head>
    		<title>Javascript Quiz</title>
    	</head>
    	<body>
    		<div id='intro'>
    			Hello and welcome to javascript quiz!
    			Click next to continue.
    			<a href="#" onclick=showQuestion();>NEXT</a>
    		</div>
    		<div id='question'>
    			Question:
    			<form>
    				question 1:<br />
    				<input type="radio" name="question1" value="1">1</input>
    				<input type="radio" name="question1" value="2">2</input>
    				<br />
    				question 2:<br />
    				<input type="radio" name="question2" value="1">1</input>
    				<input type="radio" name="question2" value="2">2</input>
    				<br />
    			</form>
    			Click see result to continue.
    			<a href="#" onclick=showResult();>SEE RESULT</a>
    		</div>
    		<div id='result'>
    			Result
    			<span id='quizresult'>0</span>
    			Click redo to redo the quiz.
    			<a href="#" onclick=showIntro();>REDO</a>
    		</div>
    
    		<script type='text/javascript'>
    			intro = document.getElementById('intro');
    			intro.style.display = 'block';
    			question = document.getElementById('question');
    			question.style.display = 'none';
    			result = document.getElementById('result');
    			result.style.display = 'none';
    
    			function showQuestion()
    			{
    				intro = document.getElementById('intro');
    				intro.style.display = 'none';
    				question = document.getElementById('question');
    				question.style.display = 'block';
    			}
    
    			function showResult()
    			{
    				processQuiz();
    
    				question = document.getElementById('question');
    				question.style.display = 'none';
    				result = document.getElementById('result');
    				result.style.display = 'block';
    			}
    
    			function showIntro()
    			{
    				result = document.getElementById('result');
    				result.style.display = 'none';
    				intro = document.getElementById('intro');
    				intro.style.display = 'block';
    			}
    
    			function processQuiz()
    			{
    				total = 0;
    				value1 = 0;
    				value2 = 0;
    
    				answer1 = document.getElementsByName('question1');
    				for (var i = 0, length = answer1.length; i < length; i++) {
    				    if (answer1[i].checked) {
    				        // do whatever you want with the checked radio
    				        value1 = answer1[i].value;
    				
    				        // only one radio can be logically checked, don't check the rest
    				        break;
    				    }
    				}
    
    				answer2 = document.getElementsByName('question2');
    				for (var i = 0, length = answer2.length; i < length; i++) {
    				    if (answer2[i].checked) {
    				        // do whatever you want with the checked radio
    				        value2 = answer2[i].value;
    				
    				        // only one radio can be logically checked, don't check the rest
    				        break;
    				    }
    				}
    
    
    				total = parseInt(value1) + parseInt(value2);
    
    				result = document.getElementById('quizresult');
    				result.innerHTML = total;
    			}
    
    		</script>
    
    	</body>
    </html>
    Thank you very much, this is exactly what I wanted to do Still, could you improve your solution, and help me with hiding the second question (as you mentioned, by hiding and showing div), so I can see only one question at a time, please. Doesnt matter if it will be javascript or jquery. Alexandra

  6. #6
    Join Date
    Dec 2013
    Posts
    4
    Thank you very much, this is exactly what I wanted Please, could you improve your html (using divs) and/or javascript/jquery to hide second question? I want to see only one question at a time. Thanks alot, Alexandra

  7. #7
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,204
    Whilst JavaScript has no persistent storage the two methods that you would use are either a cookie or a web form that encodes a URL with the data that needs to be passed to the next page and JavaScript reads the URL data.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  8. #8
    Join Date
    Nov 2012
    Location
    Jakarta
    Posts
    42
    Ahem, it is called course work, not copy paste.

    You can learn the pattern of showing and hiding div from the code and do some tinkering on your own.

    Now, for your question, you can simply copy and paste the following div:
    Code:
    <div id='question'>
    			Question:
    			<form>
    				question 1:<br />
    				<input type="radio" name="question1" value="1">1</input>
    				<input type="radio" name="question1" value="2">2</input>
    				<br />
    				question 2:<br />
    				<input type="radio" name="question2" value="1">1</input>
    				<input type="radio" name="question2" value="2">2</input>
    				<br />
    			</form>
    			Click see result to continue.
    			<a href="#" onclick=showResult();>SEE RESULT</a>
    		</div>
    You change the "div id" to "question2".

    Next you change the onclick event in the "<a href>" tag from "showResult();" to "showQuestion2();"

    You then create the processing part (hide and show div) by copy paste the following function:
    Code:
    function showQuestion()
    			{
    				intro = document.getElementById('intro');
    				intro.style.display = 'none';
    				question = document.getElementById('question');
    				question.style.display = 'block';
    			}
    you change the function name to showQuestion2()

    Next, you are going to hide question and show question2, so:
    you change the value "intro" to "question"
    and the value "question" to "question2"

    I hope that helps.

    Good luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles