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');
    
    $this['otherTest'] = Tps\Tps\Models\Test::where('id', '!=', $this->param('id'))->with('image')->get();
}
?>
==
{% put styles %}
        
        <style>
            .aside-ad-wrapper-txt {
                font-weight: bold !important;
                font-size: 18px !important;
                line-height: 1.4;
                margin-top: 10px;
            }
            
        </style>
    
{% endput %}

<!-- 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-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>



                    {% for test in otherTest %}
                        <div class="aside-ad-wrapper">
                            <a href="{{'test'|page({id: test.id})}}">
                                <img src="{{test.image.path}}" alt="" />
                            </a>
                            <p class="aside-ad-wrapper-txt">
                                {{test.title}}
                            </p>
                        </div>
                    {% endfor %}



                </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");

        let percentage = correct_answers / questions.length * 100;
        let result_text = '<p>{{'test.results_100'|_}}</p>';
        
        switch (true)
        {
            case (percentage <= 30):
              result_text = '<p>{{'test.results_30'|_}}</p>';
              break;
            case (percentage <= 50):
              result_text = '<p>{{'test.results_50'|_}}</p>';
              break; 
            case (percentage <= 70):
              result_text = '<p>{{'test.results_70'|_}}</p>';
              break; 
            case (percentage <= 99):
              result_text = '<p>{{'test.results_99'|_}}</p>';
              break; 
        }
       
        question_title.innerHTML = 
            `<h6 class="article_desc-result">
                {{'test.results'|_}}
                <br>
                ${correct_answers}/${questions.length}
            </h6>
            ${result_text}`;
    }

    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})">
                    <p>${title}</p>
                </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');
                });
            })
        }
    }
    
    const parent = document.querySelector('.article-test');
        let maxWords = 0;
        let maxWordsIndex = -1;

        // Loop through each <p> tag
        const paragraphs = parent.querySelectorAll('p');
        paragraphs.forEach((paragraph, index) => {
            // Count the number of words in the paragraph
            const wordCount = paragraph.textContent.trim().split(/\s+/).length;

            // Check if this paragraph has the most words so far
            if (wordCount > maxWords) {
                maxWords = wordCount;
                maxWordsIndex = index;
            }
        });

        // Add the appropriate class to the parent <div>
        if (maxWords >= 20) {
            parent.classList.add('bigger');
        } else if (maxWords >= 10) {
            parent.classList.add('big');
        }

    getQuestions();

</script>