dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

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

  1. #1
    Join Date
    Nov 2008
    Posts
    3

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

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

    <HTML>
    <HEAD>
    <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 {
    color:darkblue;
    font-size:14px;
    font-weight:bold;
    }
    -->
    </style>

    <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(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";
    //disableQuestion(classId);
    showResult(questionId);
    answered++;
    }
    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])
    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[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];



    ///////// THIS IS THE SECTION THAT I'M TRYING TO WORK ON /////////
    // 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)!";

    //-->
    </script>

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


    *********

    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
    Posts
    939
    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">
    <
    HTML>
    <
    HEAD><TITLE>We6.53p59</TITLE>
    <
    META http-equiv=Content-Type content="text/html; charset=UTF-8">
    <
    STYLE type=text/CSS>
    .
    bord{border:1px solid black}
    </
    STYLE>
    <
    SCRIPT type="text/javascript">

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


    </BODY></HTML> 
    Share on Google+

  4. #4
    Join Date
    Nov 2008
    Posts
    3
    justinbarneskin:

    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
    Posts
    939
    http://www.webdeveloper.com/forum/sh...305#post952305

    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
    Posts
    1
    Hello

    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
    Location
    localhost
    Posts
    5,257
    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



Recent Articles