Quiz Javascript

grogia

Nuovo Utente
30 Nov 2019
3
0
1
Buongiorno.
Vorrei creare un Quiz in Javascript ed assegnare un punteggio specifico a ogni singola domanda corretta.
Dovrei modificare il codice a seguire, che assegna 1 punto (this.score++;) ad ogni domanda corretta:

Codice:
// inizio HTML ----------

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Quiz</title>
    <!-- link rel="stylesheet" type="text/css" href="style.css" -->
</head>

<body>
    <div class="grid">
        <div id="quiz">
            <h1>Quiz Geografia</h1>
            <hr style="margin-bottom: 20px">
            <p id="question"></p>
            <div class="buttons">
                <button id="btn0"><span id="choice0"></span></button>
                <button id="btn1"><span id="choice1"></span></button>
                <button id="btn2"><span id="choice2"></span></button>
                <button id="btn3"><span id="choice3"></span></button>
            </div>
            <hr style="margin-top: 50px">
            <footer>
                <p id="progress">Question x of y</p>
                <center><p>Javascript Quiz</p></center>
            </footer>
        </div>
    </div>
<script src="question.js"></script>
</body>
</html>

// fine HTML  ---------

e lo scrip :

// inizio Javascript "question.js"  --------

function Quiz(questions) {
    this.score = 0;
    this.questions = questions;
    this.questionIndex = 0;
}

Quiz.prototype.getQuestionIndex = function() {
    return this.questions[this.questionIndex];
}
Quiz.prototype.guess = function(answer) {
    if(this.getQuestionIndex().isCorrectAnswer(answer)) {
        this.score++;
    }
    this.questionIndex++;
}

Quiz.prototype.isEnded = function() {
    return this.questionIndex === this.questions.length;
}

function Question(text, choices, answer) {
    this.text = text;
    this.choices = choices;
    this.answer = answer;
}

Question.prototype.isCorrectAnswer = function(choice) {
    return this.answer === choice;
}

function populate() {
    if(quiz.isEnded()) {
        showScores();
    }
    else {
        // show question
        var element = document.getElementById("question");
        element.innerHTML = quiz.getQuestionIndex().text;
        // show options
        var choices = quiz.getQuestionIndex().choices;
        for(var i = 0; i < choices.length; i++) {
            var element = document.getElementById("choice" + i);
            element.innerHTML = choices;
            guess("btn" + i, choices);
        }
        showProgress();
    }
};

function guess(id, guess) {
    var button = document.getElementById(id);
    button.onclick = function() {
        quiz.guess(guess);
        populate();
    }
};

function showProgress() {
    var currentQuestionNumber = quiz.questionIndex + 1;
    var element = document.getElementById("progress");
    element.innerHTML = "Domanda " + currentQuestionNumber + " di " + quiz.questions.length;
};

function showScores() {
    var gameOverHTML = "<h1>Risultato</h1>";
  
  gameOverHTML += "<h2 id='score'>Punteggio totale: " + quiz.score + "</h2>";

    var element = document.getElementById("quiz");
    element.innerHTML = gameOverHTML;
};

// crea domande
var questions = [
    new Question("Fiume piu' lungo?", ["Adige", "Tevere","Po", "Arno"], "Po"),
    new Question("Monte piu' alto?", ["Cervino", "Bianco", "Rosa", "Pollino"], "Bianco"),
    new Question("Capitale Italia", ["Milano", "Roma", "Palermo", "Venezia"], "Roma")
];

// crea quiz
var quiz = new Quiz(questions);
// visualizza quiz
populate();

// fine Javascript --------

avevo pensato di modificare le domande come segue :
  
    new Question("Fiume piu' lungo?", ["Adige", "Tevere","Po", "Arno"], "Po", 1),   // 1 punto
    new Question("Monte piu' alto?", ["Cervino", "Bianco", "Rosa", "Pollino"], "Bianco", 2),   // 2 punti
    new Question("Capitale Italia", ["Milano", "Roma", "Palermo", "Venezia"], "Roma", 3)   // 3 punti

poi la funzione Question :

    function Question(text, choices, answer, points) {
    this.text = text;
    this.choices = choices;
    this.answer = answer;
    this.points = points;     // aggiunta
}

ed infine andrebbe modificato anche il seguente codice, ma non saprei il codice da usare:

Quiz.prototype.guess = function(answer) {
    if(this.getQuestionIndex().isCorrectAnswer(answer)) {
        this.score++;      // da modificare con quale codice?
    }
    this.questionIndex++;
}
e magari bisogna aggiungere altro codice?

grazie per un cortese aiuto.
 
Ultima modifica di un moderatore:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
@grogia
Da regolamento del forum, come tutti noi sei tenuto ad usare il tag
code-gif.6007
o il tag
php-png.6009
per il PHP, quando posti del codice, oppure la funzione codice dalla barra degli strumenti
box-inserisci-2-png-jpg.6008


Inoltre ti prego di leggere attentamente il regolamento generale del forum e quello di sezione dove posti prima di continuare
Grazie
Per questa volta te lo sistemo io ma mi raccomando per il futuro
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
Ci sono software che creano quiz ben fatti senza diventare matti a programmarli
Esempio:
QUI
 
Discussioni simili
Autore Titolo Forum Risposte Data
amphioxus creare un quiz con Javascript Javascript 0
AntoCastro [PHP] Creare un sito di quiz a catena PHP 17
R [VENDO] - Sito Notizie Virali e Quiz Compravendita siti e domini 3
V Creare quiz a "completamento" PHP 2
N Creare un quiz con php PHP 10
S Quiz a punteggio e risultati su un file PHP 0
G Aiuto progettazione DB quiz Database 0
D Quiz script Javascript 5
A Caricare quiz in un sito PHP 1
B Errore quiz PHP 0
P Domande per quiz su software open source Presenta il tuo Sito 2
M Semplice Quiz in Flash Flash 0
P Quiz sul vostro sito GRATIS! Altri Annunci 1
P Quiz e Test per studio e divertimento Presenta il tuo Sito 0
B come creare i quiz???? Discussioni Varie 1
M Upload immagine con javascript problemi con FormData() Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 0
F Creare elementi html con javascript Javascript 4
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
A [Javascript] Scrittura su più campi contemporaneamente Javascript 19
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5

Discussioni simili