Skip to main content
Inspiring
November 4, 2017
Beantwortet

Multiple choice quiz

  • November 4, 2017
  • 3 Antworten
  • 3052 Ansichten

     Hi,

I need to create a multiple choice quiz consisting of 12 mulitple choice questions.

The correct answers are added to a provide a final score.

I've searched the forums and all discussions about this are really dated - referring back to a time when Flash came with questionnaire templates.

Do these templates still exist?

I obviously need to make sure whatever method I use is compatible with android/ios apps and modern browsers.

Are there any resources for this available?

Thanks.

    Dieses Thema wurde für Antworten geschlossen.
    Beste Antwort von kglad

    this was for a client that wanted a 'identify the flag' quiz:

    this.stop();

    this.name = 'main TL';

    this.maxIncorrectA = [3,2,1,1,1];

    this.nomsPays = ["nomsPaysAfrique","nomsPaysAmerique","nomsPaysAsie","nomsPaysEurope","nomsPaysOceanie"];

    this.flags = ["flagsOfAfrica","flagsOfAmerica","flagsOfAsia","flagsOfEurope","flagsOfOceania"];

    this.index = -1;

    //////////////////////////////////////////////////////////////////////

    // 1) une var nommée nomsPaysAfrique pour mettre tous les drapeaux d'Afrique

    this.nomsPaysAfrique = ["AFRIQUE DU SUD", "BÉNIN", "BURKINA FASO", "CAMEROUN", "CONGO", "CONGO RÉP.DÉM.ZAÏRE", "CÔTE D'IVOIRE", "ÉGYPTE",

        "GHANA", "GUINÉE", "GUINÉE ÉQUATORIALE", "ÎLE MAURICE", "KÉNYA", "LESOTHO", "MADAGASCAR", "MALAWI", "MALI", "NIGÉRIA", "OUGANDA",

        "RWANDA", "SÉNÉGAL", "SOMALIE", "TANZANIE", "TCHAD", "TOGO", "ZAMBIE"];

    // 1a) une var nommée flagsOfAfrica afin de faire disparaître tous les drapeaux concernés, après 3 mauvais essais

    this.flagsOfAfrica = ["afriqueDuSud1", "benin1", "burkinaFaso1", "cameroun1", "congo1", "congoRepDemZaire1", "coteIvoire1", "egypte1",

        "ghana1", "guinee1", "guineeEquatoriale1", "ileMaurice1", "kenya1", "lesotho1", "madagascar1", "malawi1", "mali1", "nigeria1", "ouganda1",

        "rwanda1", "senegal1", "somalie1", "tanzanie1", "tchad1", "togo1", "zambie1"];

    ////////////////////////////////////////////////////////////////////////////

    ///////////////////////////////////////////////////////////////////////////

    // 2) une var nommée nomsPaysAmerique pour mettre tous les drapeaux d'Amérique

    this.nomsPaysAmerique = ["ARGENTINE","BOLIVIE","BRÉSIL","CANADA","CHILI","COLOMBIE",

    "COSTA RICA","CUBA","EL SALVADOR","ÉQUATEUR","ÉTATS UNIS","GUATEMALA","GUYANE","HAÏTI","HONDURAS","MEXIQUE","PARAGUAY",

    "PÉROU","RÉP. DOMINICAINE","URUGUAY"];

    this.flagsOfAmerica = ["argentine1","bolivie1","bresil1","canada1","chili1","colombie1",

        "costaRica1","cuba1","elSalvador1","equateur1","etatsUnis1","guatemala1","guyane1","haiti1","honduras1","mexique1","paraguay1",

        "perou1","repDominicaine1","uruguay1"];

    ///////////////////////////////////////////////////////////////////////////

    ///////////////////////////////////////////////////////////////////////////

    // 3) une var nommée nomsPaysAsie pour mettre tous les drapeaux d'Asie

    this.nomsPaysAsie = ["BAHREIN","BANGLADESH","CHINE","INDE","IRAK","JAPON","KOWEIT","LIBAN","PHILIPPINES","SYRIE","TAÏWAN","VIETNAM"];

    this.flagsOfAsia = ["bahrein1","bangladesh1","chine1","inde1","irak1","japon1","koweit1","liban1","philippines1","syrie1","taiwan1","vietnam1"]

    ///////////////////////////////////////////////////////////////////////////

    ///////////////////////////////////////////////////////////////////////////

    // 4) une var nommée nomsPaysEurope pour mettre tous les drapeaux d'Europe

    this.nomsPaysEurope = ["FRANCE","ITALIE","LITUANIE","POLOGNE","UKRAINE"];

    this.flagsOfEurope =  ["france1","italie1","lituanie1","pologne1","ukraine1"];

    ///////////////////////////////////////////////////////////////////////////

    ///////////////////////////////////////////////////////////////////////////

    // 5) une var nommée nomsPaysOceanie pour mettre tous les drapeaux d'Océanie

    this.nomsPaysOceanie = ["NOUVELLE ZÉLANDE","PAPOUASIE N. GUINÉE"];

    this.flagsOfOceania = ["nouvelleZelande1","papouasieNouvelleGuinee1"]

    ///////////////////////////////////////////////////////////////////////////

    //////////////////////////////////////

    this.modal_mc.visible = false;

    this.modal_mc.addEventListener('mousedown',modalF);

    function modalF(){

        // do nothing. prevent flags from being mousedowned.

        // console.log('modal');

    }

    ///////////////////////////////////////

    /* Determine the width and height of the Stage, and preserve these values within variables to accces

    across our interactive later on.  The stage.canvas object

    can be uses to access both width and heignt when writing JavaScript.

    This is especially useful if we were to adjust the size of our Stage

    dynamically based upon the parent webpage or some othor factor */

    var stageHeight = stage.canvas.height;

    var stageWidth = stage.canvas.width;

    /* Pour aller à la page d'information du jeu.  Using frame labels is much flexible,

    it allows you to shift the frames around without having to update the specific frame

    number in your code. You can also use commands such as gotoAndStop() and gotoAndPlay()

    to effectively control the playhead */

    this.btn_instructions.addEventListener("mousedown", allerInfo.bind(this));

    function allerInfo() {

        this.gotoAndStop("info");

    }

    this.btn_jouer1.addEventListener("mousedown", allerJouer1.bind(this));

    function allerJouer1() {

        this.gotoAndStop("cAfrique");

    }

    this.btn_jouer2.addEventListener("mousedown", allerJouer2.bind(this));

    function allerJouer2() {

        this.gotoAndStop("cAfrique");

    }

    //------------------- LES CODES EN 6 ÉTAPES ------------------------------------//

    this.continentIndex = 0;

    this.continentFlags = this[this.flags[this.continentIndex]];

    this.continentNoms = this[this.nomsPays[this.continentIndex]];

    this.flagClickF = function(e){

        var i = e.currentTarget.ivar;

        if (this.nomsDrapeaux_tf.btnLabel.text == this.continentNoms) {

            this.correctAnswers++;

            var correct = true;

            this.next_mc.visible = true;

        } else {

            this.incorrectPerFlag++;

        }

        checkForEndF(correct,this);

    }

    function checkForEndF(correct,tl){

        if(tl.incorrectPerFlag==tl.maxIncorrect){

            tl.incorrectAnswers++;

            tl.incorrectPerFlag = 0;

            tl.next_mc.visible = true;

            tl.modal_mc.visible = true;

            tl.incorrect_tf.text = tl.incorrectAnswers;

            tl[tl.continentFlags[tl.index]].visible = false

            tl[tl.continentFlags[tl.index].split('1')[0]+22].visible = true;

        }

        if(correct){

            tl.incorrectPerFlag = 0;

            tl.modal_mc.visible = true;

            tl.next_mc.visible = true;

            tl.correct_tf.text = tl.correctAnswers;

            tl[tl.continentFlags[tl.index]].visible = false

            tl[tl.continentFlags[tl.index].split('1')[0]+22].visible = true;

        }

    }

    this.next_mc.addEventListener('mousedown', nextF.bind(this));

    function nextF() {

        this.index++;

        //console.log(this.index+" "+this.continentNoms[this.index])

        this.next_mc.visible = false;

        this.modal_mc.visible = false;

        if (this.index == this.continentNoms.length) {

        //if (this.index >0) {  // for testing

            var tl = this;

            if(this.continentIndex == 4){

                setTimeout(function(){ tl.gotoAndStop("final2"); tl.modal_mc.visible=false}, 3000);

            } else {

                //console.log(tl.currentFrame+10);

                setTimeout(function(){ tl.gotoAndStop(tl.currentFrame+10); tl.modal_mc.visible=false}, 3000);

            }

            return;

        }

        this.nomsDrapeaux_tf.btnLabel.text = this.continentNoms[this.index];

        if ((this.index == Math.floor(this.continentNoms.length/2) && (this.continentIndex == 1))) {

            this.gotoAndStop("choix");

        }

       

    }

    3 Antworten

    Inspiring
    November 6, 2017

    Thanks for this.

    I have some idea what's going on here and will study it closer later.

    Made me laugh that much of it is in French - just to make my life a bit more challenging!!

    Really useful so many thanks for sharing.

    kglad
    Community Expert
    Community Expert
    November 6, 2017

    sorry about that.

    my client was french and i asked her to list the flag instance names (which i copied and pasted into arrays) to limit the amount of time it would take me to encode the project.

    Inspiring
    November 5, 2017

    Actually I'm working on an app version but I will want to do an html5 version too.

    If you don't mind posting your example code I'm sure it'll be informative and useful.

    I'm pretty beginner level with javascript because it's something I dip in and out of with months between each session - I don't use it on a daily basis.

    But I have managed to cobble together some useful projects in the past . . .. probably slower than many people but y'know, I get there in the end.

    Thanks

    kglad
    Community Expert
    kgladCommunity ExpertAntwort
    Community Expert
    November 6, 2017

    this was for a client that wanted a 'identify the flag' quiz:

    this.stop();

    this.name = 'main TL';

    this.maxIncorrectA = [3,2,1,1,1];

    this.nomsPays = ["nomsPaysAfrique","nomsPaysAmerique","nomsPaysAsie","nomsPaysEurope","nomsPaysOceanie"];

    this.flags = ["flagsOfAfrica","flagsOfAmerica","flagsOfAsia","flagsOfEurope","flagsOfOceania"];

    this.index = -1;

    //////////////////////////////////////////////////////////////////////

    // 1) une var nommée nomsPaysAfrique pour mettre tous les drapeaux d'Afrique

    this.nomsPaysAfrique = ["AFRIQUE DU SUD", "BÉNIN", "BURKINA FASO", "CAMEROUN", "CONGO", "CONGO RÉP.DÉM.ZAÏRE", "CÔTE D'IVOIRE", "ÉGYPTE",

        "GHANA", "GUINÉE", "GUINÉE ÉQUATORIALE", "ÎLE MAURICE", "KÉNYA", "LESOTHO", "MADAGASCAR", "MALAWI", "MALI", "NIGÉRIA", "OUGANDA",

        "RWANDA", "SÉNÉGAL", "SOMALIE", "TANZANIE", "TCHAD", "TOGO", "ZAMBIE"];

    // 1a) une var nommée flagsOfAfrica afin de faire disparaître tous les drapeaux concernés, après 3 mauvais essais

    this.flagsOfAfrica = ["afriqueDuSud1", "benin1", "burkinaFaso1", "cameroun1", "congo1", "congoRepDemZaire1", "coteIvoire1", "egypte1",

        "ghana1", "guinee1", "guineeEquatoriale1", "ileMaurice1", "kenya1", "lesotho1", "madagascar1", "malawi1", "mali1", "nigeria1", "ouganda1",

        "rwanda1", "senegal1", "somalie1", "tanzanie1", "tchad1", "togo1", "zambie1"];

    ////////////////////////////////////////////////////////////////////////////

    ///////////////////////////////////////////////////////////////////////////

    // 2) une var nommée nomsPaysAmerique pour mettre tous les drapeaux d'Amérique

    this.nomsPaysAmerique = ["ARGENTINE","BOLIVIE","BRÉSIL","CANADA","CHILI","COLOMBIE",

    "COSTA RICA","CUBA","EL SALVADOR","ÉQUATEUR","ÉTATS UNIS","GUATEMALA","GUYANE","HAÏTI","HONDURAS","MEXIQUE","PARAGUAY",

    "PÉROU","RÉP. DOMINICAINE","URUGUAY"];

    this.flagsOfAmerica = ["argentine1","bolivie1","bresil1","canada1","chili1","colombie1",

        "costaRica1","cuba1","elSalvador1","equateur1","etatsUnis1","guatemala1","guyane1","haiti1","honduras1","mexique1","paraguay1",

        "perou1","repDominicaine1","uruguay1"];

    ///////////////////////////////////////////////////////////////////////////

    ///////////////////////////////////////////////////////////////////////////

    // 3) une var nommée nomsPaysAsie pour mettre tous les drapeaux d'Asie

    this.nomsPaysAsie = ["BAHREIN","BANGLADESH","CHINE","INDE","IRAK","JAPON","KOWEIT","LIBAN","PHILIPPINES","SYRIE","TAÏWAN","VIETNAM"];

    this.flagsOfAsia = ["bahrein1","bangladesh1","chine1","inde1","irak1","japon1","koweit1","liban1","philippines1","syrie1","taiwan1","vietnam1"]

    ///////////////////////////////////////////////////////////////////////////

    ///////////////////////////////////////////////////////////////////////////

    // 4) une var nommée nomsPaysEurope pour mettre tous les drapeaux d'Europe

    this.nomsPaysEurope = ["FRANCE","ITALIE","LITUANIE","POLOGNE","UKRAINE"];

    this.flagsOfEurope =  ["france1","italie1","lituanie1","pologne1","ukraine1"];

    ///////////////////////////////////////////////////////////////////////////

    ///////////////////////////////////////////////////////////////////////////

    // 5) une var nommée nomsPaysOceanie pour mettre tous les drapeaux d'Océanie

    this.nomsPaysOceanie = ["NOUVELLE ZÉLANDE","PAPOUASIE N. GUINÉE"];

    this.flagsOfOceania = ["nouvelleZelande1","papouasieNouvelleGuinee1"]

    ///////////////////////////////////////////////////////////////////////////

    //////////////////////////////////////

    this.modal_mc.visible = false;

    this.modal_mc.addEventListener('mousedown',modalF);

    function modalF(){

        // do nothing. prevent flags from being mousedowned.

        // console.log('modal');

    }

    ///////////////////////////////////////

    /* Determine the width and height of the Stage, and preserve these values within variables to accces

    across our interactive later on.  The stage.canvas object

    can be uses to access both width and heignt when writing JavaScript.

    This is especially useful if we were to adjust the size of our Stage

    dynamically based upon the parent webpage or some othor factor */

    var stageHeight = stage.canvas.height;

    var stageWidth = stage.canvas.width;

    /* Pour aller à la page d'information du jeu.  Using frame labels is much flexible,

    it allows you to shift the frames around without having to update the specific frame

    number in your code. You can also use commands such as gotoAndStop() and gotoAndPlay()

    to effectively control the playhead */

    this.btn_instructions.addEventListener("mousedown", allerInfo.bind(this));

    function allerInfo() {

        this.gotoAndStop("info");

    }

    this.btn_jouer1.addEventListener("mousedown", allerJouer1.bind(this));

    function allerJouer1() {

        this.gotoAndStop("cAfrique");

    }

    this.btn_jouer2.addEventListener("mousedown", allerJouer2.bind(this));

    function allerJouer2() {

        this.gotoAndStop("cAfrique");

    }

    //------------------- LES CODES EN 6 ÉTAPES ------------------------------------//

    this.continentIndex = 0;

    this.continentFlags = this[this.flags[this.continentIndex]];

    this.continentNoms = this[this.nomsPays[this.continentIndex]];

    this.flagClickF = function(e){

        var i = e.currentTarget.ivar;

        if (this.nomsDrapeaux_tf.btnLabel.text == this.continentNoms) {

            this.correctAnswers++;

            var correct = true;

            this.next_mc.visible = true;

        } else {

            this.incorrectPerFlag++;

        }

        checkForEndF(correct,this);

    }

    function checkForEndF(correct,tl){

        if(tl.incorrectPerFlag==tl.maxIncorrect){

            tl.incorrectAnswers++;

            tl.incorrectPerFlag = 0;

            tl.next_mc.visible = true;

            tl.modal_mc.visible = true;

            tl.incorrect_tf.text = tl.incorrectAnswers;

            tl[tl.continentFlags[tl.index]].visible = false

            tl[tl.continentFlags[tl.index].split('1')[0]+22].visible = true;

        }

        if(correct){

            tl.incorrectPerFlag = 0;

            tl.modal_mc.visible = true;

            tl.next_mc.visible = true;

            tl.correct_tf.text = tl.correctAnswers;

            tl[tl.continentFlags[tl.index]].visible = false

            tl[tl.continentFlags[tl.index].split('1')[0]+22].visible = true;

        }

    }

    this.next_mc.addEventListener('mousedown', nextF.bind(this));

    function nextF() {

        this.index++;

        //console.log(this.index+" "+this.continentNoms[this.index])

        this.next_mc.visible = false;

        this.modal_mc.visible = false;

        if (this.index == this.continentNoms.length) {

        //if (this.index >0) {  // for testing

            var tl = this;

            if(this.continentIndex == 4){

                setTimeout(function(){ tl.gotoAndStop("final2"); tl.modal_mc.visible=false}, 3000);

            } else {

                //console.log(tl.currentFrame+10);

                setTimeout(function(){ tl.gotoAndStop(tl.currentFrame+10); tl.modal_mc.visible=false}, 3000);

            }

            return;

        }

        this.nomsDrapeaux_tf.btnLabel.text = this.continentNoms[this.index];

        if ((this.index == Math.floor(this.continentNoms.length/2) && (this.continentIndex == 1))) {

            this.gotoAndStop("choix");

        }

       

    }

    kglad
    Community Expert
    Community Expert
    November 4, 2017

    are you creating an html5/canvas project?

    if so, there won't be any templates and if you didn't find any tutorials samples using google, they probaby don't exist.

    otoh, the main ideas behind older as3 mult choice quizes and html5/canvas are the same.  the code will be different so you won't be able to copy and paste, but you probably already know that if you've done a google search.

    if you want to see some sample html5/canvas quiz code, i can post that for you, but i doubt that will be very helpful unless you're already, at least, moderately comfortable with javascript coding and can see how to modify the code to suit your needs.