Тест программа на JQuery

303

17 декабря 2017, 09:38

Создать программу тест на JQuery, каждый отдельный вопрос хранится в виде объекта. Информация которая относится к вопросу имеет следующие характеристики: текст вопроса, варианты ответов, а также правильный ответ. До выбора ответа кнопка приложения не активна. После нажатия кнопки далее текущий вопрос исчезает и появляется следующий. Если вопрос был последним, то отображается оценка пройденного теста, оценивание производится в процентах от 0-100.

Answer 1

 <style>
        .none{
            display: none;
        }
    </style>
</head>
<body>
    <div class="firs-part">
        <h2>Hello!</h2>
        <button class="start-test">Start Test!</button>
    </div>
    <div class="content none">
        <div class="header">
            <h2></h2>
        </div>
        <div class="body">
            <p class="text-question"></p>
            <ul class="answear-list">
                <li><input id="possible_answer_0" type="radio" name="possible_answer" value=""/><label for="possible_answer_0"></label></li>
                <li><input id="possible_answer_1" type="radio" name="possible_answer" value=""/><label for="possible_answer_1"></label></li>
                <li><input id="possible_answer_2" type="radio" name="possible_answer" value=""/><label for="possible_answer_2"></label></li>
            </ul>
        </div>
        <div class="footer">
            <button class="next" value="0" disabled>Next</button>
        </div>
    </div>
    <div class="result none">
        <h2>Поздравляем тест окончен</h2>
        <p>Процент правельных ответов - <span class="percent"></span> %</p>
    </div>
    <script src="dist/jquery-3.2.1.min.js"></script>
    <script src="dist/question.js"></script>
    <script src="dist/main.js"></script>
</body>

$(function() {
    window.questions = [];
    questions =[
         {
            content:"First question",
            answer: [
                "Ответ 01",
                "Ответ 02",
                "Ответ 03"
            ],
            correct: "Ответ 02"
        },
        {
            content:"Second question",
            answer: [
                "Ответ 11",
                "Ответ 12",
                "Ответ 13"
            ],
            correct: "Ответ 13"
        },
        {
            content:"Third question",
            answer: [
                "Ответ 21",
                "Ответ 22",
                "Ответ 23"
            ],
            correct: "Ответ 21"
        },
        {
            content:"Fourth question",
            answer: [
                "Ответ 31",
                "Ответ 32",
                "Ответ 33"
            ],
            correct: "Ответ 32"
        }
    ];
});
$(function() {
    window.answer = [];
    $('.start-test').on('click',function () {
        ininQuestion();
    });
    $('button.next').on('click',function () {
        $(this).val(parseInt($(this).val()) + 1);
        console.log();
        answer.push($("input:radio[name=possible_answer]:checked").val());
        $('input:radio[name=possible_answer]').prop("checked", false);
        ininQuestion();
    });
    $('.answear-list').on('click','input[name="possible_answer"]',function () {
        $('button.next').removeAttr('disabled',true);
    });
    function ininQuestion() {
        var id_question = $('.next').val();
        $('div.content').show();
        $('div.firs-part').hide();
        if (typeof questions[id_question] === "undefined") {
            $('.content').hide();
            $('.result').show();
            console.log(answer);
            var percent_result = 0;
            $.each(answer, function( index, value ) {
                if(questions[index].correct === value){
                    percent_result++;
                }
            });
            $('.result .percent').text((percent_result/questions.length)*100);
        }else{
            $('.body .text-question').text(questions[id_question].content);
            $.each(questions[id_question].answer, function( index, value ) {
                $('#possible_answer_'+index).val(value).next('label').text(value);
            });
            $('button.next').attr('disabled',true);
        }
    }
});