首页 > 解决方案 > 在 Javascript 测验中使用之前标记的完整选项随机回答问题

问题描述

我制作了一个“测验应用程序”,我想在其中添加一些额外的功能,例如

  1. 当我单击打印在“问题列表部分”上的随机“问题编号”时,然后重定向到该问题,如果问题是“已回答”,则保持标记的选项不变
  2. 当我单击“上一个”和“下一个”按钮时,我可以后退和前进,而“以前标记的选项”完好无损。

我可以使用“转到下一个和上一个问题”功能来制作“随机转到问题”功能,但我不明白如何使“以前标记的选项”完好无损,无论用户标记了正确答案

一些 Html 部分

        <div class="question-box">
            <div class="question-text">
                <!-- Q1. The term “biology” was introduced by?  -->
            </div>
            <div class="question-option">
                <!-- <div class="option">A.&ensp;Aristotle</div>
                <div class="option">B.&ensp;Darwin</div>
                <div class="option">C.&ensp;Lamarck & Treviranus</div>
                <div class="option">D.&ensp;Linnaeus</div> -->
            </div>
            <div class="question-direction">
                <button type="button" class="btn prev">Prev</button>
                <button type="button" class="btn next">Next</button> 
            </div>
        </div>
        
        <div class="answer-box">
            <div class="answer-container">
                <!-- <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div> -->
            </div>
            <div class="answer-direction">
                <button type="button" class="btn submit">Submit</button> 
            </div>
        </div>

一些 JavaScript 部分

        // prev question
        let q_pre = document.querySelector('.prev');
        q_pre.addEventListener('click', function(){

            if(Q_count === 0) {
                q_pre.disable = 'true';
            } else {
                Q_count--;
                setQuestion(); 
            }
           
        });
        

        // next question
        let q_nxt = document.querySelector('.next');
        q_nxt.addEventListener('click', function(){ 

            if(Q_count === Q_len - 1){
                q_nxt.disable = 'true';
            } else {
                Q_count++;
                setQuestion(); 
            }
                 
        }); 

这是我的测验应用程序的 链接

标签: javascripthtmlarraysfunctionstore

解决方案


推荐阅读