Simple Image Quiz Quandry: Next Button Triggers a New Full Screen Image

StackOverflow https://stackoverflow.com/questions/23480247

Question

I'm trying to design some multiple choice/image quizzes for a local art school I run. I can't, however, find adequate examples of what I am trying to do - certainly not by any quiz generators which all appear to have been designed in 1997.

I prefer the simplicity of the posted quiz code but can't figure out how to make the "Next Question" trigger a new full screen image. Despite library JavaScript books and endless Google searches regarding image arrays and radio buttons, I must concede defeat and admit that I am out of my element. So here I am, pleading for some code charity - all in the name of art education.

Ideally, the "Next Question" Button would trigger a different full screened background image of a famous painting. The quiz/text would appear on top of said image, stating something like:

"This painters work shocked Parisians when it was first shown in the Salon des Refuses of 1863" followed by a few multiple choice answers, such as:

Edgar Degas/Edouard Manet /James Whistler

Any help would greatly be appreciated. Thanks!

http://jsfiddle.net/theandyman/9HNGD/1/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Image Quiz</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/quizandbackgroundimg.css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>

<img alt="full screen background image" src="images/balloons.jpg" id="full-screen-background-image" /> 

<div id="container">
<h1>Quiz app</h1>
<p>There will be no points awarded for unanswered questions.</p>
<div id="content">
<h3 id="question"></h3>
<div id="choices"></div>
<p><button id="submit"></button></p>
<p id="score"></p>
</div>
</div>
<script src="js/quiz.js"></script>
</body>
</html>

(JavaScript can be viewed at the JSFiddle Link)

Was it helpful?

Solution

You could add the image to the quiz array like so:

var quiz = [{
  "question": "The first question doesn't seem to be showing?",
  "choices": ["Don't", "Know", "Why"],
  "correct": "Why",
  "image": "http://upload.wikimedia.org/wikipedia/en/thumb/f/f4/The_Scream.jpg/475px-The_Scream.jpg"
}, ...]

Then add a line in the askQuestion function that swaps out the src attribute of the image based on the image set in the array above:

$("full-screen-background-image").src = quiz[currentQuestion].image;

I've knocked up a quick JSFiddle based on the code you provided http://jsfiddle.net/69BPA/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top