ORIENT/themes/modern2/pages/test-start.htm

title = "Test start"
url = "/test/start/:id"
layout = "new/master-inside"
is_hidden = 0
robot_index = "index"
robot_follow = "follow"
==

<?php
function onStart(){
    $this['questions'] = Tps\Tps\Models\TestQuestion::with('image')->where('test_id', $this->param('id'))->get()->shuffle();
    $this['test_id'] = $this->param('id');
}

?>
==

<!-- Test ================================== -->
<main class="article">
    <div class="container">
        <div class="article-wrap">
            <div class="trending-head affiche-head">
                <h2>{{'test.tests'|_}}</h2>
                <span></span>
            </div>

            <div class="article-inner">
                <div class="article-content">
                    <div class="article-content-top">
                        <div class="article-head">
                            <h2>
                                {{questions.first.test.title}}
                            </h2>
                        </div>

                        <div class="article-desc" id="question_container">
                            <h4 class="article_desc-title" id="question_title"></h4>

                            <div class="article-test" id="question_answer"></div>

                            <div class="article-hint" id="description">
                                <div class="article_desc-photo" id="question_description_image"></div>

                                <p id="question_description_text"></p>

                                <div class="article_btn color-gr">
                                    <a id="question_next_btn" onclick="openNewQuestion()">
                                        {{'test.next'|_}}
                                    </a>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <aside class="aside article-aside test-aside">
                    <h6 class="aside-ad-wrapper-title">
                        {{'test.see_also'|_}}
                    </h6>

                    <div class="aside-ad-wrapper">
                        <a href="#">
                            <img src="../assets/images/affiche.jpg" alt="" />
                        </a>
                        <p class="aside-ad-wrapper-txt">
                            В Минфине обсудили разработку стратегии АБР для Туркменистана с новым страновым
                            директором
                        </p>
                    </div>

                    <div class="aside-ad-wrapper">
                        <a href="#">
                            <img src="../assets/images/affiche.jpg" alt="" />
                        </a>
                        <p class="aside-ad-wrapper-txt">
                            В Минфине обсудили разработку стратегии АБР для Туркменистана с новым страновым
                            директором
                        </p>
                    </div>

                    <div class="aside-ad-wrapper">
                        <a href="#">
                            <img src="../assets/images/affiche.jpg" alt="" />
                        </a>
                        <p class="aside-ad-wrapper-txt">
                            В Минфине обсудили разработку стратегии АБР для Туркменистана с новым страновым
                            директором
                        </p>
                    </div>
                </aside>
            </div>
        </div>
    </div>
</main>
<!-- Test end ============================== -->

<script>

    let locale = '{{ activeLocale }}';
    let test_id = '{{ test_id }}';

    let questions;
    let step = 1;

    let correct_answers = 0;
    function getQuestions() {
        let request = new XMLHttpRequest(); 
        let url = `${location.protocol + '//' + location.host}/${locale}/test/questions/${test_id}`
        request.open('GET', url);
        request.send();
        
        request.onload = async function () {
            questions = JSON.parse(this.response);
            
            startNewQuestion();
        }
    }

    function openNewQuestion(){
        if(step <= questions.length){
            startNewQuestion();
        }else{
            showResults();
        }
    }

    function showResults(){

        let question_title = document.getElementById("question_container");

        question_title.innerHTML = 
            `<h6 class="article_desc-result">
                {{'test.results'|_}}
                <br>
                ${correct_answers}/${questions.length}
            </h6>`;
    }

    function startNewQuestion(){

        let question = questions[step-1];

        let question_title = document.getElementById("question_title");
        question_title.innerHTML = '';
        question_title.innerHTML = 
            `${question.question} <br> ${step}/${questions.length}`;
        
        let description = document.getElementById("description");
        description.classList.remove("active");

        let question_description_text = document.getElementById("question_description_text");
        question_description_text.innerHTML = '';
        question_description_text.innerHTML = 
            `${question.description}`;
        
        if(question.image){
            let question_description_image = document.getElementById("question_description_image");
            question_description_image.innerHTML = '';
            question_description_image.innerHTML = `<img src="${question.image.path}" alt="test-photo">`;
        }
        let question_answer = document.getElementById("question_answer");
        question_answer.innerHTML = '';
        
        let answersBox = '';
        question.answers.forEach(answer => {
            let correct = answer.correct === "1" ? true : false;

            let title = locale == 'ru' ? answer.title_ru :
                locale == 'en' ? answer.title_en : answer.title_tm;
            
            answersBox += 
                `<button class="article-test-btn" onclick="checkAnswer(this, ${correct})">
                    ${title}
                </button>`; 
        });
        question_answer.innerHTML = answersBox;

        step++;
        refreshButtons();

    }

    function checkAnswer(button, correct){
        button.classList.add(correct ? "true" : "false");

        let description = document.getElementById("description");
        description.classList.add("active");

        if(correct){
            correct_answers++;
        }
    }

    function refreshButtons(){
        let btn = document.querySelectorAll('.article-test-btn');
        let hint = document.querySelector('.article-hint');

        if (btn != undefined) {
            btn.forEach(x => {
                x.addEventListener('click', function () {
                    btn.forEach(p => {
                        p.setAttribute("disabled", "true");
                        p.classList.add('disabled');
                    })

                    hint.classList.add('active');
                });
            })
        }
    }

    getQuestions();

</script>