Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help on quiz game

    Hello all,

    * I'm very new to javascript and working on a quiz game. Theres a set of code im working on but i need help, and greatly appreciate any help.

    * After every questions, there is a tick or wrong animation/image that should pop over the answer card.
    I created the gif file one for a tick and one for a wrong:
    http://www.freeimagehosting.net/cqn91
    http://www.freeimagehosting.net/v74v6

    *By right the user should not be able to click on the answer cards anymore after finishing the quiz. For now the score keeps going up although the quiz is done. And after the quiz is done, a button should direct the user to the DetailedResult page, instead of the popup.

    *How to change the popup into a Html(DetailedResult) page, and instead of a text eg.(resent.jpg), how can I make the real image show, and if the qn is correct, how can I place a tick and if the qn is wrong how can I place a wrong image.
    Ive created both images.
    tick image==>http://i1069.photobucket.com/albums/...ttica/tick.jpg
    wrong image==>http://i1069.photobucket.com/albums/...ca/wrong-1.jpg

    *Suppose at the bottom of the html page, should have a button for the user to retry only wrong answers.
    *And how do i keep updating the user score for each attempt he tries on the table.

    Below are a set of code i'm working on, and another set of Html layout(DetailedResult) which i intend to achieve.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Card Test </title>
    <style>
    img { margin:7px; }
    #Question {
    text-align:left;
    font-family:"Vladimir Script";
    font-size:40px;
    }
    </style>
    
    <script type="text/javascript">
    // For: http://www.codingforums.com/private....pm&pmid=124136
    
    var baseURL = 'http://s1069.photobucket.com/albums/u475/felettica/';
    var questions = [
    // format [pic,[image1,imag2,image3]],
    ['happy.jpg', ['*|delight.jpg','|sad.jpg','|confuse.jpg']], // 0
    ['angry.jpg', ['|sad.jpg','*|resent.jpg','|joyful.jpg']], // 1
    ['father.jpg',['|sister.jpg','|mum.jpg','*|dad.jpg']], // 2
    ['sports.jpg',['|crying.jpg','*|soccer.jpg','|sleep.jpg']], // 1
    ['fruit.jpg', ['*|apple.jpg','|meat.jpg','|bacon.jpg']], // 0
    ];
    
    var qNo = 0;
    var correct = [];
    function $_(IDS) { return document.getElementById(IDS); }
    
    function NextQuestion(IDS) {
    var response;
    switch (IDS) {
    case 'image1' : response = 0; break;
    case 'image2' : response = 1; break;
    case 'image3' : response = 2; break;
    }
    if (response == currentQuestion[4]) {
    correct[0]++; 
    alert('Well Done');
    } else {
    alert('Wrong Answer');
    }
    correct.push(currentQuestion.join('|')+'|'+response); // alert(correct.join('\n'));
    qNo++;
    
    if (qNo < questions.length) {
    $_('score').innerHTML = 'Score: '+correct[0];
    showImages(qNo);
    $_('Question').innerHTML = 'Question: '+(qNo+1);
    } else {
    $_('score').innerHTML = 'You had '+correct[0]+' correct answers for '+questions.length+' questions';
    DisplayQuizResults();
    // alert('End of quizi\n\n'+correct.join('\n'));
    return;
    }
    // I created a two .gif animation of a tick and a wrong 
    // but unsure how to place it so that it appears on the
    // correct answer image instead of the alertbox.
    // Tick animation Url==> http://www.freeimagehosting.net/cqn91
    // Wrong animation Url==>http://www.freeimagehosting.net/v74v6
    // I tried to add a button to direct to the DetailedResult page
    // which shows the correct and wrong questions but it didnt appear.
    // It should appear after the alert('End of quiz'); pops up.
    }
    
    var currentQuestion = [];
    function showImages(ptr) { 
    var tarr = []; var tmp = '';
    currentQuestion = [];
    currentQuestion.push(questions[ptr][0]); // 0 
    temp_questions = questions[ptr][1].slice();
    temp_questions.sort(randOrd);
    for (var i=0; i<3; i++) {
    tarr = temp_questions[i].split('|')
    if (tarr[0] != '') { tmp = i; } // save correct answer
    currentQuestion.push(tarr[1]); // 1,2,3 // save response order
    }
    currentQuestion.push(tmp); // 4 
    
    $_("Pic").src=baseURL+currentQuestion[0];
    $_("image1").src=baseURL+currentQuestion[1];
    $_("image2").src=baseURL+currentQuestion[2];
    $_("image3").src=baseURL+currentQuestion[3];
    }
    
    function randOrd() { return (Math.round(Math.random())-0.5); }
    window.onload = function() {
    correct = []; correct.push(0);
    questions = questions.sort(randOrd);
    showImages(0);
    }
    
    // Following from: http://www.yourhtmlsource.com/javascript/popupwindows.html
    function DisplayQuizResults() {
    var generator=window.open('','name','height=400,width=500');
    generator.document.write('<html><head><title>Popup</title>');
    generator.document.write('<link rel="stylesheet" href="style.css">');
    generator.document.write('</head><body>');
    var str = '';
    var tarr = [];
    // correct array format: item +|+ question +|+ answer +|+ response 
    
    var str = '<h1> Your Results</h1>';
    for (var i=1; i<correct.length; i++) {
    tarr = correct[i].split('|'); // item|img1|img2|img3|ans|resp
    str += 'Question #'+i;
    str += ' was: '+tarr[0];
    str += '<br>Correct answer was: '+tarr[4] +'('+tarr[tarr[4]*1+1]+')';
    if (tarr[4] != tarr[5]) {
    str += ' but your answer was: '+tarr[5] +'('+tarr[tarr[5]*1+1]+')';
    }
    str += '<p>';
    }
    generator.document.write('<p>'+str+'<p>');
    generator.document.write('<p><a href="java_script:self.close()">Close</a> the popup.</p>');
    generator.document.write('</body></html>');
    generator.document.close();
    }
    </script>
    
    </head>
    <body>
    <div id="Question">Question: 1</div>
    <div align="center">
    <img id="Pic" src="" height="220" width="321"> <p>
    <img id="image1" src="" width="269" height="171" onclick="NextQuestion(this.id)">
    <img id="image2" src="" width="269" height="171" onclick="NextQuestion(this.id)">
    <img id="image3" src="" width="269" height="171" onclick="NextQuestion(this.id)">
    <p> <span id="score">Score: </span> <p></div>
    </body>
    </html>
    ================================================
    Instead of the popup, instead i thought having it on a Html page (DetailedResult), the layout below
    ================================================
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    
    
    <style type="text/css">
    Table{
    	position:absolute;
    	left:632px;
    	top:97px;
    	width: 408px;
    	border:1px solid black;
    }
    table, td, th
    {
    border:1px solid green;
    }
    th
    {
    background-color:green;
    color:white;
    }
    </style>
    
    </head>
    
    <body>
    
    <table width="472" border="0" cellspacing="0" cellpadding="0"> <!--In the table,the scores of the user should appear for the the current attempt and previous attempts so that the user can track his scores-->
      <tr>
        <th width="227" scope="row"><strong>My Attempts</strong></th>
        <td width="181"> <div align="center">My score:</div></td>
      </tr>
      <tr>
        <th height="19" scope="row">1st Attempt</th>
        <td><div align="center">4/5</div></td>
      </tr>
      <tr>
        <th scope="row">2nd Attempt</th>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <th scope="row">3rd Attempt</th>
        <td>&nbsp;</td>
      </tr>
    </table>
    <h1> My Current Attempt </h1>
    <p>&nbsp;</p>
    <p>Question 1: "code to get Qn 1 image"  "either tick image or wrong image" </p> <!-- For each qn, its picture will appear and either a tick or wrong image next to it. If the user answer it correctly, then a tick will appear or other wise. The image of the question would be smaller. -->
    <p>Question 2: "code to get Qn 1 image"  "either tick image or wrong image"</p>
    <p>Question 3: "code to get Qn 1 image"  "either tick image or wrong image"</p>
    <p>Question 4: "code to get Qn 1 image"  "either tick image or wrong image"</p>
    <p>Question 5: "code to get Qn 1 image"  "either tick image or wrong image"</p>
    
    <p><button type="button">Retry Wrong Question</button><p> <!-- direct page to retry wrong qns once more -->
    
    <!-- tick image URL:http://i1069.photobucket.com/albums/...ttica/tick.jpg 
     wrong image URL http://i1069.photobucket.com/albums/...ca/wrong-1.jpg 
     baseURL:http://s1069.photobucket.com/albums/u475/felettica/   -->
    
    </body>
    </html>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    This is just a proof of concept script.

    You will need to change the 'tick' and 'wrong-1' images to something that allows transparancy.
    The problem with your current .jpg format is that it OVERWRITES the selected image rather
    than OVERLAY as you seem to want to do.

    See what I mean here.
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    //<![CDATA[
    var baseURL = 'http://s1069.photobucket.com/albums/u475/felettica/';
    var questions = [
    // format [pic,[image1,imag2,image3]],
      ['happy.jpg', ['delight.jpg','sad.jpg','confuse.jpg']], // 0
      ['angry.jpg', ['sad.jpg','resent.jpg','joyful.jpg']], // 1
      ['father.jpg',['sister.jpg','mum.jpg','dad.jpg']], // 2
      ['sports.jpg',['crying.jpg','soccer.jpg','sleep.jpg']], // 1
      ['fruit.jpg', ['apple.jpg','meat.jpg','bacon.jpg']], // 0
    ];
    right = 'http://i1069.photobucket.com/albums/u475/felettica/tick.jpg';
    wrong= 'http://i1069.photobucket.com/albums/u475/felettica/wrong-1.jpg';
    var qNo = 0;
    
    function $_(IDS) { return document.getElementById(IDS); }
    function showImages(ptr) { 
      if (ptr == '') { ptr = qNo; if (qNo < questions.length-1) { qNo++; } else { qNo=0; } }
      $_("Pic").src=baseURL+questions[ptr][0];
      $_("image1").src=baseURL+questions[ptr][1][0];
      $_("image2").src=baseURL+questions[ptr][1][1];
      $_("image3").src=baseURL+questions[ptr][1][2];
      $_("right").src=right;
      $_("wrong").src=wrong;
    }
    
    window.onload = function() {
      showImages(0);
    }
    //]]>
    function overlayTest(info) {
      if (info == 'image1') { $_('image1').src = right; }
      if (info == 'image3') { $_('image3').src = wrong; }
    }
    </script>
    
    </head>
    <body>
    <input type="text" id="imgPtr" value=""> 
    <button onclick="showImages('')">Display</button><p>
    <div align="center">
    <img id="Pic" src="" height="220" width="321"> <p>
    <img id="image1" src="" width="269" height="171" onclick="overlayTest(this.id)">
    <img id="image2" src="" width="269" height="171">
    <img id="image3" src="" width="269" height="171" onclick="overlayTest(this.id)">
    <p>
    <img id="right" src="" width="269" height="171">
    <img id="wrong" src="" width="269" height="171">
    <p> <span id="score">Score: </span> <p></div>
    </body>
    </html>
    There may be a jpg format that allows transparancy (I don't know),
    but I thought it was the .png format that allows this ability.

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help on quiz game

    Dear jmrker,

    I understand what you meant, following that, I created another set of cards. Instead of the tick or wrong, I put the tick in the image itself. How are they inserted in the codes, and how can they replace the alert box..
    Here is an example:
    baseURL:http://s1069.photobucket.com/albums/u475/felettica/

    * For qn 1,
    picture qn:happy-1.jpg (http://i1069.photobucket.com/albums/...ca/happy-1.jpg)
    choice1:delight-1.jpg
    (http://i1069.photobucket.com/albums/.../delight-1.jpg)
    choice2:sad-1.jpg
    (http://i1069.photobucket.com/albums/...tica/sad-1.jpg)
    choice3:confuse-1.jpg
    (http://i1069.photobucket.com/albums/.../confuse-1.jpg)

    If user click delight, new picture qn will overlay the previous as well as a new delight card will overlay the previous card simultaneously, while other card remain the same.

    correct picture qn to overlay:Happygreen.jpg
    (http://i1069.photobucket.com/albums/...Happygreen.jpg)
    correct delight card to overlay:delightgreen.jpg
    (http://i1069.photobucket.com/albums/...lightgreen.jpg)
    If the user presses either of the 2 wrong answer cards, the new picture qn will overlay the previous as well as a new wrong answer card will overlay the previous simultaneously, while other cards remains the same.
    wrong picture qn to overlay:happywrong.jpg
    (http://i1069.photobucket.com/albums/...happywrong.jpg)
    wrong sad card to overlay:sadwrong-1.jpg
    (http://i1069.photobucket.com/albums/...a/sadwrong.jpg)
    wrong confuse card to overlay:confusewrong.jpg
    (http://i1069.photobucket.com/albums/...nfusewrong.jpg)

    ================================================
    For qn 2:
    picture qn:angry-1.jpg (http://i1069.photobucket.com/albums/...ca/angry-1.jpg)
    choice 1:sad-1.jpg
    (http://i1069.photobucket.com/albums/...tica/sad-1.jpg)
    choice 2:Resent-1.jpg
    (http://i1069.photobucket.com/albums/...a/Resent-1.jpg)
    choice3:joyful-1.jpg
    (http://i1069.photobucket.com/albums/...a/joyful-1.jpg)
    correct picture qn to overlay:angrygreen.jpg
    (http://i1069.photobucket.com/albums/...angrygreen.jpg)
    wrong picture qn to overlay:Angrywrong.jpg
    (http://i1069.photobucket.com/albums/...Angrywrong.jpg)
    correct Resent card to overlay:resentgreen.jpg
    (http://i1069.photobucket.com/albums/...esentgreen.jpg)
    wrong sad card to overlay:sadwrong.jpg
    (http://i1069.photobucket.com/albums/...a/sadwrong.jpg)
    wrong joyful card to overlay:joyfulwrong.jpg
    (http://i1069.photobucket.com/albums/...oyfulwrong.jpg)


  •  

    LinkBacks (?)


    Posting Permissions

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