Visualizzazione dei risultati da 1 a 3 su 3

Discussione: Quiz e JavaScript

  1. #1

    Quiz e JavaScript

    Un caro saluto a tutti,
    sto lavorando sulla costruzione di quiz da fare online, e avrei qualche quesito per voi esperti di JavaScript.
    Intanto vi allego un po' di codice:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    body {width:700px;margin:auto;font-family:calibri}
    div {padding:5px}
    input {padding:5px;}
    .tastoverifica {width:100%;text-align:center;background-color:#74bb29;color:white;padding:20px;font-size:24px;border-radius:5px;}
    </style>

    <script type="text/javascript">
    function gradeTest() {

    var alertText;
    var i;
    var bloccoAcorrectAnswers = 0

    var a1 = document.getElementById('q1').value.toLowerCase(); if(a1 == 'soggetto') {bloccoAcorrectAnswers++;}
    var a2 = document.getElementById('q2').value.toLowerCase(); if(a2 == 'oggetto') {bloccoAcorrectAnswers++;}

    var a3 = document.getElementsByName('q3');
    var a3answers = new Array();
    var a3right = new Array('2','3','6');
    var a3bool = true;

    for(i = 0; i < a3.length; i++) {
    if(a3[i].checked) {
    a3answers.push(a3[i].value);
    }
    }
    a3answers.sort();
    a3right.sort();
    if(a3answers.length == a3right.length) {
    for(i = 0; i < a3answers.length; i++) {
    if(a3answers[i] != a3right[i]) {
    a3bool = false;
    break;
    }
    }
    }
    else {
    a3bool = false;
    }
    if(a3bool == true) {
    bloccoAcorrectAnswers++;
    }
    alert(bloccoAcorrectAnswers)
    }
    </script>
    </head>

    <body>

    <form id="test">
    <div><b>A1. Rispondi a queste due domande di grammatica:</b></div>
    <div>Qual è la funzione logica che indica chi compie un'azione? Il <input name="q1" type="text" id="q1" size="15" maxlength="20" /></div>
    <div>Qual è il complemento che indica ciò su cui ricade l'azione? Il complemento<input name="q2" type="text" id="q2" size="15" maxlength="20" /></div>


    <br><hr><br>


    <div><b>A2. Indica se le seguenti affermazioni sono vere o false</b></div>
    <table>
    <tr>
    <td></td>
    <td>Vero</td>
    <td>Falso</td>
    <tr>
    <tr>
    <td>A) Milano è il capoluogo del Piemonte</td>
    <td><input name="q3" type="checkbox" id="q38" value="1" /></td>
    <td><input name="q3" type="checkbox" id="q38" value="2" /></td>
    <tr>
    <tr>
    <td>B) Il presidente della Repubblica italiana è Mattarella</td>
    <td><input name="q3" type="checkbox" id="q38" value="3" /></td>
    <td><input name="q3" type="checkbox" id="q38" value="4" /></td>
    <tr>
    <tr>
    <td>C) Roger Federer è un tennista tedesco</td>
    <td><input name="q3" type="checkbox" id="q38" value="5" /></td>
    <td><input name="q3" type="checkbox" id="q38" value="6" /></td>
    <tr>
    </table>

    <br><br><br>
    <input class="tastoverifica" name="submit" type="button" onClick="gradeTest()" value="Verifica le tue risposte" />
    </form>
    </body>
    </html>

    In pratica ogni variabile mi aggiunge 1 alle risposte corrette, che poi richiamo nell'alert come risultato del testo.
    Allora, quello che vorrei fare e per cui chiedo il vostro aiuto è questo:
    1) Vorrei che le due risposte nell'input di testo dessero, prese assieme, un punto e non due: vorrei capire quindi come va impostata la variabile in questo caso;
    2) Avrei bisogno, per la domanda con le 3 checkbox, che venga considerata valida anche (per esempio) con 2 risposte su 3 corrette;
    3) Vorrei impostare una condizione che permette di visualizzare l'alert con il punteggio soltanto se si sono selezionate tutte le risposte.

    Qualcuno mi può aiutare?
    Grazie mille a tutti,
    cari saluti,

    HC

  2. #2
    Utente di HTML.it
    Registrato dal
    Aug 2015
    Messaggi
    2
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    body {width:700px;margin:auto;font-family:calibri}
    div {padding:5px}
    input {padding:5px;}
    .tastoverifica {width:100%;text-align:center;background-color:#74bb29;color:white;padding:20px;font-size:24px;border-radius:5px;}
    </style>
    <script type="text/javascript">
    function gradeTest() {

    //var alertText;
    var i;
    var bloccoAcorrectAnswers = 0

    // Controllo che almeno una delle due risposte al quesito A1 sia corretta
    var a1 = document.getElementById('q1').value.toLowerCase();
    var a2 = document.getElementById('q2').value.toLowerCase();
    if (a1 == 'soggetto' || a2 == 'oggetto') {
    bloccoAcorrectAnswers++;
    }

    // Controllo che almeno due delle tre risposte al quesito A2 siano corrette
    var checkCorrect = 0;
    var a3 = document.getElementsByName('q3');
    if (a3[1].checked) {
    ++checkCorrect;
    }
    var a4 = document.getElementsByName('q4');
    if (a3[0].checked) {
    ++checkCorrect;
    }
    var a5 = document.getElementsByName('q5');
    if (a3[1].checked) {
    ++checkCorrect;
    }
    if (checkCorrect >= 2) {
    bloccoAcorrectAnswers++;
    }

    // Visualizzo il risultato solo se l'utente ha risposto a tutti i quesiti
    if (
    a1 != ""
    && a2 != ""
    && (
    (a3[0].checked || a3[1].checked)
    && (a4[0].checked || a4[1].checked)
    && (a5[0].checked || a5[1].checked)
    )
    ) {
    alert(bloccoAcorrectAnswers)
    }

    }
    </script>
    </head>
    <body>
    <form id="test">
    <div><b>A1. Rispondi a queste due domande di grammatica:</b></div>
    <div>Qual è la funzione logica che indica chi compie un'azione? Il <input name="q1" type="text" id="q1" size="15" maxlength="20" /></div>
    <div>Qual è il complemento che indica ciò su cui ricade l'azione? Il complemento<input name="q2" type="text" id="q2" size="15" maxlength="20" /></div>
    <br>
    <hr>
    <br>
    <div><b>A2. Indica se le seguenti affermazioni sono vere o false</b></div>
    <table>
    <tr>
    <td></td>
    <td>Vero</td>
    <td>Falso</td>
    </tr>
    <tr>
    <td>A) Milano è il capoluogo del Piemonte</td>
    <td><input name="q3" type="radio" id="q3" value="1" /></td>
    <td><input name="q3" type="radio" id="q3" value="2" /></td>
    </tr>
    <tr>
    <td>B) Il presidente della Repubblica italiana è Mattarella</td>
    <td><input name="q4" type="radio" id="q4" value="1" /></td>
    <td><input name="q4" type="radio" id="q4" value="2" /></td>
    </tr>
    <tr>
    <td>C) Roger Federer è un tennista tedesco</td>
    <td><input name="q5" type="radio" id="q5" value="1" /></td>
    <td><input name="q5" type="radio" id="q5" value="2" /></td>
    </tr>
    </table>
    <br>
    <br>
    <br>
    <input class="tastoverifica" name="submit" type="button" onClick="gradeTest()" value="Verifica le tue risposte" />
    </form>
    </body>
    </html>

  3. #3
    Grazie mille, gentilissimo!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.