View Full Version : Need help on quiz game

05-16-2012, 10:45 AM
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:

*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/u475/felettica/tick.jpg
wrong image==>http://i1069.photobucket.com/albums/u475/felettica/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.

<title> Card Test </title>
img { margin:7px; }
#Question {
font-family:"Vladimir Script";

<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]) {
alert('Well Done');
} else {
alert('Wrong Answer');
correct.push(currentQuestion.join('|')+'|'+response); // alert(correct.join('\n'));

if (qNo < questions.length) {
$_('score').innerHTML = 'Score: '+correct[0];
$_('Question').innerHTML = 'Question: '+(qNo+1);
} else {
$_('score').innerHTML = 'You had '+correct[0]+' correct answers for '+questions.length+' questions';
// alert('End of quizi\n\n'+correct.join('\n'));
// 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();
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


function randOrd() { return (Math.round(Math.random())-0.5); }
window.onload = function() {
correct = []; correct.push(0);
questions = questions.sort(randOrd);

// Following from: http://www.yourhtmlsource.com/javascript/popupwindows.html
function DisplayQuizResults() {
var generator=window.open('','name','height=400,width=500');
generator.document.write('<link rel="stylesheet" href="style.css">');
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><a href="java_script:self.close()">Close</a> the popup.</p>');

<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>

Instead of the popup, instead i thought having it on a Html page (DetailedResult), the layout below

<meta charset="utf-8">
<title>Untitled Document</title>

<style type="text/css">
width: 408px;
border:1px solid black;
table, td, th
border:1px solid green;



<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-->
<th width="227" scope="row"><strong>My Attempts</strong></th>
<td width="181"> <div align="center">My score:</div></td>
<th height="19" scope="row">1st Attempt</th>
<td><div align="center">4/5</div></td>
<th scope="row">2nd Attempt</th>
<th scope="row">3rd Attempt</th>
<h1> My Current Attempt </h1>
<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/u475/felettica/tick.jpg
wrong image URL http://i1069.photobucket.com/albums/u475/felettica/wrong-1.jpg
baseURL:http://s1069.photobucket.com/albums/u475/felettica/ -->


05-16-2012, 07:47 PM
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.

<title> Untitled </title>
<script type="text/javascript">
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; } }

window.onload = function() {
function overlayTest(info) {
if (info == 'image1') { $_('image1').src = right; }
if (info == 'image3') { $_('image3').src = wrong; }

<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)">
<img id="right" src="" width="269" height="171">
<img id="wrong" src="" width="269" height="171">
<p> <span id="score">Score: </span> <p></div>

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.

05-17-2012, 08:54 AM
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:

* For qn 1,
picture qn:happy-1.jpg (http://i1069.photobucket.com/albums/u475/felettica/happy-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
correct delight card to overlay:delightgreen.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
wrong sad card to overlay:sadwrong-1.jpg
wrong confuse card to overlay:confusewrong.jpg

For qn 2:
picture qn:angry-1.jpg (http://i1069.photobucket.com/albums/u475/felettica/angry-1.jpg)
choice 1:sad-1.jpg
choice 2:Resent-1.jpg
correct picture qn to overlay:angrygreen.jpg
wrong picture qn to overlay:Angrywrong.jpg
correct Resent card to overlay:resentgreen.jpg
wrong sad card to overlay:sadwrong.jpg
wrong joyful card to overlay:joyfulwrong.jpg