Quiz

0 Mike Higgins · June 28, 2014
I need to have a graphic move across the page depending on how well the user does on the quiz. For example, if your quiz is about cars you can have a car graphic move when the quiz is scored. If the user gets 100% the car could reach some goal (e.g., a finish line) and if the user get 50% the car graphic makes it only halfway.

So in shore I am looking for an example script that moves an image across the page according to a users score results.

Post a Reply

Replies

Oldest  Newest  Rating
0 Mike Higgins · June 30, 2014
Help vampire, funny,,, No, I have been trying/Searching Google for a solution and other forums as well such as codingforums.com, still w/No luck.

element-id.js

var steps = (document.body.getBoundingClientRect().width-100)/100;{
var pos=0;
pos=pos+25;
if(pos>100){
pos=100;
}
document.getElementById("car").style.left=pc+"%";
}


quiz_config.js

var useranswers = new Array();
var answered = 0;

function renderQuiz() {
for(i=0;i<questions.length;i++) {
document.writeln('<p class="question">' + questions + ' <span id="result_' + i + '">
<img src="Images/blank.gif" style="border:0" alt="" /></span></p>');
for(j=0;j<choices.length;j++) {
document.writeln('<input type="radio" name="answer_' + i + '" value="' + choices[j] + '" id="answer_' + i + '_' + j +
'" class="question_' + i + '" onclick="submitAnswer(' + i + ', this, \'question_' + i + '\', \'label_' + i + '_' + j + '\')" /><label id="label_' + i + '_' + j +
'" for="answer_' + i + '_' + j + '"> ' + choices[j] + '</label><br />');
}
}
document.writeln('<p><input type="submit" value="Show Score" onclick="showScore()" />
<input type="submit" value="Reset Quiz" onclick="resetQuiz(true)" /></p><p style="display:none">
<img src="Images/correct.gif" style="border:0" alt="Correct!" /><img src="Images/incorrect.gif" style="border:0" alt="Incorrect!" /></p>');
}
function resetQuiz(showConfirm) {
if(showConfirm)
if(!confirm("Are you sure you want to reset your answers and start from the beginning?"))
return false;
document.location = document.location;
}
function submitAnswer(questionId, obj, classId, labelId) {
useranswers[questionId] = obj.value;
document.getElementById(labelId).style.fontWeight = "bold";
disableQuestion(classId);
showResult(questionId);
answered++;
}
function showResult(questionId) {
if(answers[questionId] == useranswers[questionId]) {
document.getElementById('result_' + questionId).innerHTML = '<img src="Images/correct.gif" style="border:0" alt="Correct!" />';
} else {
document.getElementById('result_' + questionId).innerHTML = '<img src="Images/incorrect.gif" style="border:0" alt="Incorrect!" />';
}
}
function showScore() {
if(answered != answers.length) {
alert("You have not answered all of the questions yet!");
return false;
}
questionCount = answers.length;
correct = 0;
incorrect = 0;
for(i=0;i<questionCount;i++) {
if(useranswers == answers)
correct++;
else
incorrect++;
}
pc = Math.round((correct / questionCount) * 100);
alertMsg = "You scored " + correct + " out of " + questionCount + "\n\n";
alertMsg += "You correctly answered " + pc + "% of the questions! \n\n";
if(pc == 100)
alertMsg += response[0];
else if(pc >= 90)
alertMsg += response[1];
else if(pc >= 70)
alertMsg += response[2];
else if(pc > 50)
alertMsg += response[3];
else if(pc >= 40)
alertMsg += response[4];
else if(pc >= 20)
alertMsg += response[5];
else if(pc >= 10)
alertMsg += response[6];
else
alertMsg += response[7];
if(pc < 100) {
if(confirm(alertMsg))
resetQuiz(false);
else
return false;
} else {
alert(alertMsg);
}
}
function disableQuestion(classId) {
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++) {
if (alltags.className == classId) {
alltags.disabled = true;
}
}
}


quiz_progress.js

        var progressbar_steps = 50;
var progressPane = false;
var progressBar_bg = false;
var progressBar_outer = false;
var progressBar_txt = false;
var progressbarWidth;
var currentStep = 0;
function moveProgressBar(steps){
if(!progressBar_bg){
progressPane = document.getElementById('progressPane');
progressBar_bg = document.getElementById('progressBar_bg');
progressBar_outer = document.getElementById('progressBar_outer');
progressBar_txt = document.getElementById('progressBar_txt');
progressbarWidth = progressBar_bg.clientWidth;
}
if(!steps){
progressBar_outer.style.width = progressbarWidth + 'px';
progressBar_txt.innerHTML = '100%';
setTimeout('document.getElementById("progressPane").style.display="none"',50);
}else{
currentStep+=steps;
if(currentStep>progressbar_steps)currentStep = progressbar_steps;
var width = Math.ceil(progressbarWidth * (currentStep / progressbar_steps));
progressBar_outer.style.width = width + 'px';
var percent = Math.ceil((currentStep / progressbar_steps)*100);
progressBar_txt.innerHTML = percent + '%';
if(currentStep==progressbar_steps){
setTimeout('document.getElementById("progressPane").style.display="none"',50);
}
}

}
function demoProgressBar()
{
if(currentStep<progressbar_steps){
moveProgressBar(1);
setTimeout('demoProgressBar()',100);
}
}
window.onload = demoProgressBar;


quiz-04.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" style="background-color: rgb(213, 222, 227);">
<head>
<meta name="generator" content=" see www.w3.org" />
<script type="text/javascript" src="JS/quiz_functions.js"></script>
<script type="text/javascript" src="JS/quiz_config.js"></script>
<script type="text/javascript" src="JS/quiz_progress.js"></script>
<script type="text/javascript" src="JS/element-id.js"></script>
<title>Kingdom Photography Quiz</title>

</head>

<body style="background-color: rgb(213, 222, 227); padding: 2px 4px; float: left;">
<script type="text/javascript">
renderQuiz();
</script>

<style type="text/css">
#pageContent{
width:100%;
margin:0 auto;
text-align:left;
background-color:#EEE;
height:100%}
#pageContent p{
padding-left:10px;
padding-right:10px}
#progressPane{
width:100%;
height:100%;
background-color:#d5dee3;
z-index:5000;
position:absolute;
left:0px;
top:0px}
#progressBar_bg{
position:absolute;
left:50%;
top:50%;
width:300px;
height:20px;
border:1px solid #8ea3b5;
background-color:#b9c7d1;
margin-left:-150px;
margin-top:-20px;
text-align:center}
#progressBar_outer{
position:absolute;
left:0px;
top:0px;
width:0px;
height:100%;
overflow:hidden}
#progressBar {
background-image: url("Images/progressBar.gif");
background-position: left center;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 300px;
z-index: 5000;
filter: Alpha(Opacity=0, FinishOpacity=100,Style=1,StartX=0, StartY=0, FinishX=200,FinishY=20) ;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) inset}
#progressBar_txt{
color:#000;
z-index:10000;
width:100%;
height:100%;
left:0px;
top:0px;
position:absolute;
font-family:arial;
font-size:0.8em;
line-height:20px}
p.question{
font-weight: bold}
#car{
background: url('Images/volkswagen.png') 0px 0px/100px 50px no-repeat;
height:50px;
width:100px;
position:relative;
left:0px;
top:10px}
</style>

<div id="progressPane">
<div id="progressBar_bg">
<div id="progressBar_outer">
<div id="progressBar">
</div>
</div>
<div id="progressBar_txt">
0 %
</div>
</div>
</div>
</body>
</html>





  • 1

Javascript

107,237 followers
About

A scripting language that is added to standard HTML to create interactive effects, apps, games for the browser.

Links
Moderators