Results 1 to 7 of 7

Thread: Multiple Choice Quiz (want to add picture & sound)

  1. #1
    Join Date
    Nov 2008

    Multiple Choice Quiz (want to add picture & sound)

    I am working with the quiz found on this site (Multiple Choice Quiz that is instantly graded/checked), and would like to add pictures to the questions and rollover sound effects.

    I have figured how to add the picture, but not the sound. Sound effects are played when added to the html section, but not when added to the javascript coding. I am alright with html and css, but not with javascript. Any help from the javascript experts would be appreciated.
    Share on Google+

  2. #2
    Join Date
    Nov 2008

    Sorry - forgot to add coding used

    Quote Originally Posted by Johnathan-Masak View Post
    I am working with the quiz found on this site (Multiple Choice Quiz that is instantly graded/checked), and would like to add pictures to the questions and rollover sound effects.

    I have figured how to add the picture, but not the sound. Sound effects are played when added to the html section, but not when added to the javascript coding. I am alright with html and css, but not with javascript. Any help from the javascript experts would be appreciated.

    Sorry -- I realized after posing the original message that I had forgotten to include a coding example. That doesn't give perspecitve experts much to go on!

    ********* Coding Example *********

    <TITLE>The JavaScript Source: Miscellaneous : Multiple Choice Quiz</TITLE>
    <META HTTP-EQUIV="The JavaScript Source" CONTENT = "no-cache">
    <META NAME="description" CONTENT="Add a quiz to your Web page without using a server-side script. Easy to set-up. Questions and answers are stored in a multi-dimensional array format in an external file. The quiz is marked in real time, and once answered, questions are set to read-only. A summary of the users score is alerted at the end.">
    <META NAME="date" CONTENT="2005-12-27">
    <META NAME="channel" CONTENT="Developer">
    <META NAME="author" CONTENT="James Crooke">
    <META NAME="section" CONTENT="Miscellaneous">
    <style type="text/css">
    .question {

    <script type="text/javascript">
    /* This script and many more are available free online at
    The JavaScript Source :: http://javascript.internet.com
    Created by: James Crooke :: http://www.cj-design.com */

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

    function renderQuiz() {
    for(i=0;i<questions.length;i++) {
    document.writeln('<p class="question">' + questions[i] + ' <span id="result_' + i + '"><img src="blank.gif" style="border:0" alt="" /></span></p>');
    for(j=0;j<choices[i].length;j++) {
    document.writeln('<input type="radio" name="answer_' + i + '" value="' + choices[i][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[i][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="correct.gif" style="border:0" alt="Correct!" /><img src="incorrect.gif" style="border:0" alt="Incorrect!" /></p>');
    function resetQuiz(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.color = "grey";
    function showResult(questionId) {
    if(answers[questionId] == useranswers[questionId]) {
    document.getElementById('result_' + questionId).innerHTML = '<img src="correct.gif" style="border:0" alt="Correct!" />'; // I tried to make the background a different colour for the answer document.getElementById(questionId).style.border ='1px';
    } else {
    document.getElementById('result_' + questionId).innerHTML = '<img src="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[i] == answers[i])
    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];
    alertMsg += response[7];
    if(pc < 100) {
    return false;
    } else {
    function disableQuestion(classId) {
    var alltags=document.all? document.all : document.getElementsByTagName("*")
    for (i=0; i<alltags.length; i++) {
    if (alltags[i].className == classId) {
    alltags[i].disabled = true;

    var questions = new Array();
    var choices = new Array();
    var answers = new Array();
    var response = new Array();

    // To add more questions, just follow the format below.

    questions[0] = "1) JavaScript is ..." ;
    choices[0] = new Array();
    choices[0][0] = "the same as Java";
    choices[0][1] = "kind of like Java";
    choices[0][2] = "different than Java";
    choices[0][3] = "ther written part of Java";
    answers[0] = choices[0][2];

    // image works, but sound doesn't //

    questions[1] = "<a href='javascriptHTMLSound' id='dummyspan' // the smiley is actually a colon followed by a D as in "DHTML"
    onMouseOver='DHTMLSound('success.wav')'><img src='some_image.gif'></a>";
    choices[1] = new Array();
    choices[1][0] = "Play This" + "<a href='javascriptlaySound('success.wav')'>Play This</a>";
    choices[1][1] = "objective";
    choices[1][2] = "evil";
    choices[1][3] = "object based";
    answers[1] = choices[1][3];


    questions[2] = "3) To comment out a line in JavaScript ...";
    choices[2] = new Array();
    choices[2][0] = "Precede it with two forward slashes, i.e. '//'";
    choices[2][1] = "Precede it with an asterisk and a forward slash, i.e. '*/'";
    choices[2][2] = "Precede it with an asterisk, i.e. '*'";
    choices[2][3] = "Precede it with a forward slash and an asterisk, i.e. '/*'";
    answers[2] = choices[2][0];

    questions[3] = "4) JavaScript can only run on Windows";
    choices[3] = new Array();
    choices[3][0] = "True";
    choices[3][1] = "False";
    answers[3] = choices[3][1];

    questions[4] = "5) Semicolons are optional at the end of a JavaScript statement.";
    choices[4] = new Array();
    choices[4][0] = "True";
    choices[4][1] = "False";
    answers[4] = choices[4][0];

    questions[5] = "strings are...";
    choices[5] = new Array();
    choices[5][0] = "strings, numbers, BooBoos, and nulls";
    choices[5][1] = "strings, text, Booleans, and nulls";
    choices[5][2] = "strings, numbers, Booleans, and nulls";
    choices[5][3] = "strings, numbers, Booleans, and zeros";
    answers[5] = choices[5][2];

    // response for getting 100%
    response[0] = "Excellent, top marks!";
    // response for getting 90% or more
    response[1] = "Excellent, try again to get 100%!"
    // response for getting 70% or more
    response[2] = "Well done, that is a good score, can you do better?";
    // response for getting over 50%
    response[3] = "Nice one, you got more than half of the questions right, can you do better?";
    // response for getting 40% or more
    response[4] = "You got some questions right, you can do better!";
    // response for getting 20% or more
    response[5] = "You didn't do too well, why not try again!?";
    // response for getting 10% or more
    response[6] = "That was pretty poor! Try again to improve!";
    // response for getting 9% or less
    response[7] = "Oh dear, I think you need to go back to school (or try again)!";


    <BODY BGCOLOR=#ffffff vlink=#0000ff >
    function DHTMLSound(surl) {
    document.getElementById("dummyspan").innerHTML="<embed src='"+surl+"' hidden=true autostart=true loop=false>";
    <script type="text/javascript">


    I have also tried the following sound ideas, but none work "within" the javascript -- they do work when assigned to a button inside the html however... The trick is, I want to be able to display an image within the question, then mouseover a <span> of text or an image (preferrably NOT a link <a>) and have the sounds played as part of the choices for the question.

    For a slightly different purpose, I'm also interested in being able to have the correst answer (for mor complicated quizes) appear beside the question, in a <div> if possible, rather than an alert, to give the solution / reasoning for the correct answer.

    Any help at all would be really appreciated.
    Share on Google+

  3. #3
    Join Date
    Oct 2006
    Sound is always dicey, and most coders discourage it because it's rude.
    Here's a script that used to work just fine until Microsoft pirated my machine with updates and renders this code worthless. But you can try it...
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    META http-equiv=Content-Type content="text/html; charset=UTF-8">
    STYLE type=text/CSS>
    bord{border:1px solid black}
    SCRIPT type="text/javascript">

    META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
    BODY scroll="auto">
    EMBED SRC="bubbles.wav" HIDDEN=false AUTOSTART="false" MASTERSOUND NAME="soundfile1"></EMBED>

    span class="bord" onMouseOver="document.soundfile1.play()" onMouseOut="document.soundfile1.stop()"noise</span>

    Share on Google+

  4. #4
    Join Date
    Nov 2008

    Thanks for the reply -- sorry to hear about your MS woes.....The code that you supplied is for HTML -- I was hoping to be able to add the sound in the javascript coding (in original posting about 1/2 way through there is a commented section)

    Most sound embedding codes work in html, but they won't seem to work in javascript.....any thoughts?
    Share on Google+

  5. #5
    Join Date
    Oct 2006

    that code writes the player in javascript and, it works for me in IE
    Maybe you can pull it out and use what you can.
    Share on Google+

  6. #6
    Join Date
    Sep 2017

    I am faced this issue might be last year and then I asked to my friend in Uk he recommended me to Mr. Juniad who is currently working in tiksom Pvt Ltd. I explained him my issues he resolve my issue very proffesionaly. he charged me some sort of amount but he took me out from trouble.
    Share on Google+

  7. #7
    Join Date
    Mar 2007
    Very old post, closing.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...
    Share on Google+

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