Проверки, если все вопросы были даны ответы с JavaScript


Я сделал проект, викторина, и я сделал код, чтобы увидеть, если все вопросы были даны ответы, с помощью JavaScript.

Он работает, но его способ более полный, чем я хотел быть. Я первый проверить каждый вариант по каждому вопросу и разделить его, то я использую функцию, чтобы увидеть, если на этот вопрос ответили (т. е. allfalse()), а затем положить все возвращает на каждый вопрос в списке, то после этого я проверить этот список с другой функцией(т. е. alltrue()), чтобы увидеть, если на все вопросы ответили или нет.

Очень исчерпывающий метод, и я хочу, чтобы улучшить читаемость и главное представление, может кто-нибудь помочь мне?(Мне было запрещено использование требует от HTML, что бы сделать это намного проще)

Извините, документация на португальском языке, но я думаю, я уже объяснил.

// Põe o ID das respostas certas em uma lista, vou usar para contar o placar depois
var certos = ["0", "7", "10", "14", "17"];

function allfalse(obj) {
    // Ve se o usuario respondeu a questão "obj"
    for (var k in obj) {
        if (obj[k]) {  //Se for true vai entrar aqui
            return true; //Se ele\a respondeu a questão entra aqui e para o loop
        }
    }
    return false; //Se nenhuma das opções da pergunta foi escolhida vai cair aqui

}

function alltrue(lis) {
    // Faz o contrario que a função anterior, é para checar se todas as peguntas foram respondidas
    for (var k in lis) {
        if (!lis[k]) { 
        // Se tiver alguma questão não respondida(false na função anterior) vai cair aqui
            return false;
        }
    }
    return true; // Se todas foram respondidas vai cair aqui

}

function check() {
//Essas variaveis veêm todas opçoes de cada questão separadamente, e checam se foi escolhido ou não
    var q1 = [document.getElementById("0").checked, document.getElementById("1").checked, document.getElementById("2").checked, document.getElementById("3").checked];
    var q2 = [document.getElementById("4").checked, document.getElementById("5").checked, document.getElementById("6").checked, document.getElementById("7").checked];
    var q3 = [document.getElementById("8").checked, document.getElementById("9").checked, document.getElementById("10").checked, document.getElementById("11").checked];
    var q4 = [document.getElementById("12").checked, document.getElementById("13").checked, document.getElementById("14").checked, document.getElementById("15").checked];
    var q5 = [document.getElementById("16").checked, document.getElementById("17").checked, document.getElementById("18").checked, document.getElementById("19").checked];
    console.log(q1, q2, q3, q4, q5);
    var todas = [allfalse(q1), allfalse(q2), allfalse(q3), allfalse(q4), allfalse(q5)];
    // var todas, joga a lista de cada uma das questões para a função allfalse 
    console.log(todas);
    console.log(alltrue(todas));
    return alltrue(todas); 
    // retorna True se todas as perguntas foram respondidas e false se estiver faltando

}

function placar() {
    var placar = 0;
    for (var i = 0; i < 19; i++) {
        //checa todas opções possíveis
        if (document.getElementById(i.toString()).checked){ 
            //Se a opção estiver selecionada entra aqui 
            if (certos.includes(i.toString()))  { 
                /* Se a opção selecionada estiver na lista de certos entra aqui e aumenta o placar
                para usar esse método eu coloquei o id de todas opções como se fossem index de uma lista
                */
                placar += 1;                  
            }
        }
    }
    return placar;
}


function mostrar_placar() {
    if (!check()) {
        //Se check deu false vai alertar o usuário para responder todas questões
        alert("Todas as questões são obrigatórias");
    } else {
        //Se não tiver erro irá mostrar o placar
        alert("Seu placar é " + placar());
    }
}
<!DOCTYPE HTML5>
<html>
    <head lang=pt>
       <meta charset="utf-8">
        <title>Formulario</title>
        <link rel="stylesheet" type="text/css" href="quiz1.css">
        <script src=quiz.js></script>
    </head>    
    <body>        
            <form class=formulario onsubmit="return mostrar_placar()"> 
                <h3>Qual é o nome do inventor da linguagem de programação Python?</h3>
                <input name= "q1" id ="0" type="radio" value="Guido van Rossum">Guido van Rossum<br> 
                <input name= "q1" id ="1" type="radio" value="Dennis Ritchie">Dennis Ritchie<br> 
                <input name= "q1" id ="2" type="radio" value="James Gosling">James Gosling<br>
                <input name= "q1" id ="3" type="radio" value="Brendan Eich">Brendan Eich<br>           
                <h3>Dentre as alternativas a seguir, qual não é um item de hardware?</h3>
                <input name= "q2" id ="4" type="radio" value="Mouse">Mouse<br> 
                <input name= "q2" id ="5" type="radio" value="Processador">Processador<br> 
                <input name= "q2" id ="6" type="radio" value="Chipset">Chipset<br>
                <input name= "q2" id ="7" type="radio" value="Debian">Debian<br><br>
                <h3>O que é Windows da Microsoft?</h3>
                <input name= "q3" id ="8" type="radio" value="Processador">É um processador<br> 
                <input name= "q3" id ="9" type="radio" value="Navegador">É um navegador<br> 
                <input name= "q3" id ="10" type="radio" value="SO">É um sistema operacional<br>
                <input name= "q3" id ="11" type="radio" value="Antivirus">É um antivírus<br><br> 
                <h3>Qual da alternativas contêm somente sistemas operacionais?</h3>
                <input name= "q4" id ="12" type="radio" value="Asus">Asus, AMD, Intel.<br> 
                <input name= "q4" id ="13" type="radio" value="Word">Word, Excel, Powerpoint<br> 
                <input name= "q4" id ="14" type="radio" value="Windows">Windows 8, Android, IOS<br>
                <input name= "q4" id ="15" type="radio" value="Mozila">Mozila Firefox, Internet Explorer, Google Chrome.<br><br>                 
                <h3>Qual a principal função do Sistema Operacional?</h3>
                <input name= "q5" id ="16" type="radio" value="Correcao">Corrigir os danos de um Computador.<br> 
                <input name= "q5" id ="17" type="radio" value="Conexão">Servir de intermediário entre o usuário e os componentes do computador<br> 
                <input name= "q5" id ="18" type="radio" value="Internet">Estabelecer conexão com a Internet.<br>
                <input name= "q5" id ="19" type="radio" value="Debian">Processar dados<br><br>                
                <input type="submit" value="confirmar">
        </form>   
        
        
    </body>
</html>



Комментарии
1 ответ

Форма проверки

Одним из вариантов упрощения кода, который проверяет форму поле выбора, чтобы использовать HTML5 и характеристика форма проверки данных. В принципе, добавив необходимый атрибут для всех радио-кнопок (ну хотя бы один на группу см. Это так ответ на более широкий контекст)
должно хватить. При этом форма представления функции обратного вызова (т. е. mostrar_placar() можно упростить, чтобы просто звонить placar() в линию, которая показывает предупреждение.

Кэш ссылок дом

Дом поиск (напр. document.getElementById()) являются дорогостоящими, и должны произойти только один раз на каждый элемент или набор элементов. Это мудро, чтобы сохранить их в переменной (или константе, если вы хотите использовать ES6 в константный).

Проверка количества правильных ответов

Вместо функции placar() цикл через все входы, просто чтобы увидеть, если каждый будет проверено и если это так, если id атрибут включается в certosфункция может просто перебирать правильные ответы и проверить, если связанный входные данные проверяются. Для небольшого приложения, как это, разница между 20 повторов и 5 мал, но он будет большой разницы в более крупное приложение.

Предупреждения

Как Blindman67 советовали в комментариях на Тушар ответ:


Следует помнить, что сигналы могут быть отключены и не должны использоваться для отзывов пользователей, как вы не можете знать (без дополнительных кодов и догадок), если он был прочитан. Это гораздо лучше, чтобы обеспечить обратную связь на странице.

Поэтому он может быть мудрым, чтобы создать элемент, и этот элемент появляются/обновляются при необходимости, вместо использования alert().

Рерайт

См. ниже код, который учитывает рекомендации выше.

Обновление:

Видимо, с помощью required атрибут запрещено. В этом случае, более простой способ, чтобы убедиться, что все вопросы будут завершены, - использовать в виде FormData объект, а затем получить ключи в виде FormData.ключи() и потому, что возвращает итератор, преобразовать в массив с Array.from(). И, наконец, вернуть равенство длины этого массива с массивом, содержащим правильные ответы.



// Põe o ID das respostas certas em uma lista, vou usar para contar o placar depois
var certos = ["0", "7", "10", "14", "17"];
//declare variables here - could use keyword let instead of var
var inputs, result;
document.addEventListener('DOMContentLoaded', function() {
//when DOM is ready, access elements

//store checkboxes in an array
inputs = document.querySelectorAll('input[type="radio"]');
result = document.getElementById('result');
});

function placar() {
var placar = 0;
//find the number of checked correct answers
return certos.reduce(function(cumulativeSum, certo) {
if (inputs[certo].checked) {
cumulativeSum++;
}
return cumulativeSum;
}, 0);
}

function check() {
//create FormData object- could also give the <form> an id and
// access it via document.getElementById()
var fd = new FormData(document.forms[0]);
//check that the number of completed questions is the same as the number of correct answers
return Array.from(fd.keys()).length == certos.length;
}

function mostrar_placar() {
if (!check()) {
//Se check deu false vai alertar o usuário para responder todas questões
// alert("Todas as questões são obrigatórias");
result.innerHTML = "Todas as questões são obrigatórias";
} else {
//Se não tiver erro irá mostrar o placar
// alert("Seu placar é " + placar());
result.innerHTML = "Seu placar é " + placar();
}
return false; //stop form from submitting
}


#result {
border: 1px solid #f00;
}

<form class=formulario onsubmit="return mostrar_placar()" >
<h3>Qual é o nome do inventor da linguagem de programação Python?</h3>
<input name="q1" id="0" type="radio" value="Guido van Rossum">Guido van Rossum<br>
<input name="q1" id="1" type="radio" value="Dennis Ritchie">Dennis Ritchie<br>
<input name="q1" id="2" type="radio" value="James Gosling">James Gosling<br>
<input name="q1" id="3" type="radio" value="Brendan Eich">Brendan Eich<br>
<h3>Dentre as alternativas a seguir, qual não é um item de hardware?</h3>
<input name="q2" id="4" type="radio" value="Mouse">Mouse<br>
<input name="q2" id="5" type="radio" value="Processador">Processador<br>
<input name="q2" id="6" type="radio" value="Chipset">Chipset<br>
<input name="q2" id="7" type="radio" value="Debian">Debian<br><br>
<h3>O que é Windows da Microsoft?</h3>
<input name="q3" id="8" type="radio" value="Processador">É um processador<br>
<input name="q3" id="9" type="radio" value="Navegador">É um navegador<br>
<input name="q3" id="10" type="radio" value="SO">É um sistema operacional<br>
<input name="q3" id="11" type="radio" value="Antivirus">É um antivírus<br><br>
<h3>Qual da alternativas contêm somente sistemas operacionais?</h3>
<input name="q4" id="12" type="radio" value="Asus">Asus, AMD, Intel.<br>
<input name="q4" id="13" type="radio" value="Word">Word, Excel, Powerpoint<br>
<input name="q4" id="14" type="radio" value="Windows">Windows 8, Android, IOS<br>
<input name="q4" id="15" type="radio" value="Mozila">Mozila Firefox, Internet Explorer, Google Chrome.<br><br>
<h3>Qual a principal função do Sistema Operacional?</h3>
<input name="q5" id="16" type="radio" value="Correcao">Corrigir os danos de um Computador.<br>
<input name="q5" id="17" type="radio" value="Conexão">Servir de intermediário entre o usuário e os componentes do computador<br>
<input name="q5" id="18" type="radio" value="Internet">Estabelecer conexão com a Internet.<br>
<input name="q5" id="19" type="radio" value="Debian">Processar dados<br><br>
<input type="submit" value="confirmar">
</form>
<div id="result"></div>



2
ответ дан 15 марта 2018 в 07:03 Источник Поделиться