weixin_41244451 2024-06-13 12:35 采纳率: 93.9%
浏览 1
已结题

怎样能即保存之前的所有题,又能更新错题的结果

运算页:

function checkAnswer() {
    if($.trim($("input[name=answerInput]").val()) == "")
    {
        $("input[name=answerInput]").focus();
        return false;
    }
    document.getElementById('question1').textContent='';
    isQuestionDisplayed = false;//每一题重新禁用按纽
    const userAnswer = parseInt(document.getElementById('answerInput').value);
    if (userAnswer === questions[currentQuestionIndex].answer) {
        alert('正确!');
    } else {
        alert('错误,正确答案是: ' + questions[currentQuestionIndex].answer);
    }
    document.getElementById('answerInput').value = '';
    $("input[name=answerInput]").focus();
    
    if (userAnswer !== undefined) { // 确保 userAnswer 已被定义
        questions[currentQuestionIndex].userAnswer = userAnswer; // 添加这一行
    }
    if (userAnswer === questions[currentQuestionIndex].answer) {
        questions[currentQuestionIndex].isCorrect = true;
    } else {
        questions[currentQuestionIndex].isCorrect = false;
    }
    let endTime = new Date().getTime(); // 记录结束时间
    let totalTime = (endTime - startTime) / 1000; // 转换为秒
    localStorage.setItem('questionsData', JSON.stringify(questions));
    
    if(tiliang==1)
    {
        if (currentQuestionIndex < jidaoti) {//几道题
            currentQuestionIndex++;
            document.getElementById('question').textContent = '';
            generateQuestion(numbers);
        } else {
            if(numbers!='')
            {
                window.history.back();
            }
            else
            {
                window.location.href = "/oa/oa_zxsxl.php?act=jieguo&totalTime="+totalTime+"&type={$type}&type_text={$type_text}&xingshi={$xingshi}&xingshi_text={$xingshi_text}&tiliang={$tiliang}&zushu={$zushu}&bishu={$bishu}&shijian={$shijian}&yusu={$yusu}";
            }
        }
    }
    else
    {
        currentQuestionIndex++;
        document.getElementById('question').textContent = '';
        generateQuestion(numbers);
    }
    if(xingshi==1 || xingshi==2)
    {
        document.getElementById('question').textContent = '请看题';
    }
    else
    {
        document.getElementById('question').textContent = '请听题';
        speak1('请听题');
    }
}

成绩列表页:

html部分省略..............
<script>
window.onload = function() {
    const questionsData = JSON.parse(localStorage.getItem('questionsData'));
    const resultsTableBody = document.getElementById('resultsTableBody');
    let correctCount = 0;
    let wrongCount = 0;
    
    // 对questionsData进行排序,错题在前,对题在后
    questionsData.sort((a, b) => {
        return a.isCorrect === b.isCorrect ? 0 : a.isCorrect ? 1 : -1;
    });
 
    // 计算对错题数
    questionsData.forEach(question => {
        if (question.isCorrect) {
            correctCount++;
        } else {
            wrongCount++;
        }
    });
    // 更新段落文本
    const summaryElement1 = document.getElementById('summary1');
    const summaryElement2 = document.getElementById('summary2');
    const summaryElement3 = document.getElementById('summary3');
    const summaryElement4 = document.getElementById('summary4');//准确率
    let zts=correctCount+wrongCount;//总题数
    let zql=correctCount/zts*100;
    summaryElement1.textContent = `对题数:${correctCount}`;
    summaryElement2.textContent = `错题数:${wrongCount}`;
    summaryElement3.textContent = `总题数:${zts}`;
    summaryElement4.textContent = `准确率:${zql.toFixed(2)}%`;
    
    questionsData.forEach((question, index) => {
        const row = resultsTableBody.insertRow();
        const cell1 = row.insertCell(0);
        const cell2 = row.insertCell(1);
        const cell3 = row.insertCell(2);
        const cell4 = row.insertCell(3);
        const cell5 = row.insertCell(4);
        
        // 添加class到每个cell
        cell1.className = "biankuan2";
        cell2.className = "biankuan3";
        cell3.className = "biankuan3";
        cell4.className = "biankuan3";
        cell5.className = "biankuan3";
        cell1.height = "40";
        if (question.isCorrect) {} else {
            cell1.style = 'color: crimson';
            cell2.style = 'color: crimson';
            cell3.style = 'color: crimson';
            cell4.style = 'color: crimson';
            cell5.style = 'color: crimson';
        }
        
        cell1.textContent = index + 1;
        cell2.textContent = question.question.slice(1);
        if (question.isCorrect) {} else {
            cell2.innerHTML+=' <button onclick="chongzuo(\'' + question.question + '\')" style="height: 30px; font-size: 15px;"> 重做 </button>';
        }
        // 根据是否正确显示答案
        cell3.textContent = question.userAnswer;
        cell4.textContent = question.answer;
        cell5.textContent = question.isCorrect ? '√' : '×';
    });
};

function chongzuo(numbers) {
    // 将题目信息编码并附加到URL
    var encodedNumbers = encodeURIComponent(numbers); // 对numbers进行URL编码
    window.location.href = '/oa/oa_zxsxl.php?act=yunsuan&type={$type}&type_text={$type_text}&xingshi={$xingshi}&xingshi_text={$xingshi_text}&tiliang={$tiliang}&zushu={$zushu}&bishu={$bishu}&shijian={$shijian}&yusu={$yusu}&numbers=' + encodedNumbers;
}
</script>

全部运算完以后进入到成绩列表页,这时会把所有做过的题全部列出来,然后算错的题后面有个重做按纽,点击重做后又进入到运算页,把错的题做一遍,做完这道错题后又进入到成绩列表,这时成绩列表只显示这一道错题,之前其它的题就没有显示了,于是我就做了一个判断,当是重做时,就window.history.back();返回到上一页,但是这样又有一个问题:这样返回去虽然保住了之前的其它所有题,但是我重做的最后结果没有更新。怎样能即保存之前的所有题,又能更新错题的结果。比如成绩列表页为:


 序号                      题目                     我的答案           正确答案          是否正确
    1                1+2+3【重做】                  3                        6                     ×
    2                 3+2+3【重做】                 5                        8                     ×
    3                 5-4+1                                2                        2  4                 3-2+3                                4                        4                     √

如果重做第一题后,如果答案还是不对,成绩列表页为:
 序号                      题目                     我的答案           正确答案          是否正确
    1                1+2+3【重做】                  5                        6                     ×
    2                 3+2+3【重做】                 5                        8                     ×
    3                 5-4+1                                2                        2  4                 3-2+3                                4                        4                     √

如果重做第一题后,如果答案对了,成绩列表页为:
 序号                      题目                     我的答案           正确答案          是否正确
    1                1+2+3                                 6                        6  2                 3+2+3【重做】                 5                        8                     ×
    3                 5-4+1                                2                        2  4                 3-2+3                                4                        4                     √

接着做第二题,如果答案不对,成绩列表为:
 序号                      题目                     我的答案           正确答案          是否正确
    1                1+2+3                                 6                        6  2                 3+2+3【重做】                 7                        8                     ×
    3                 5-4+1                                2                        2  4                 3-2+3                                4                        4                     √

接着做第二题,如果答案对了,成绩列表为:
 序号                      题目                     我的答案           正确答案          是否正确
    1                1+2+3                                 6                        6  2                 3+2+3                                8                        8  3                 5-4+1                                2                        2  4                 3-2+3                                4                        4 
  • 写回答

3条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-06-13 12:35
    关注

    引自免费微信小程序:皆我百晓生

    要实现题目描述的需求,关键在于确保每次用户重做错题时,本地存储(localStorage)中的题目数据能够得到更新,并且在返回成绩列表页时能够读取到最新的数据。以下是具体的解决方案:

    更新本地存储的数据

    checkAnswer()函数中,你已经将用户的答案和是否正确保存到了questions数组中对应的题目对象里。为了确保重做后的结果也能保存,你需要在用户重做题目后再次调用localStorage.setItem方法更新存储的数据。

    优化chongzuo函数

    当用户点击“重做”按钮时,chongzuo函数应该不仅跳转到运算页,还应该将需要重做的题目索引传递给运算页,以便在运算页更新对应题目的数据。

    修改chongzuo函数

    function chongzuo(index, numbers) {
        // 将题目信息和题目索引编码并附加到URL
        var encodedNumbers = encodeURIComponent(numbers);
        var encodedIndex = encodeURIComponent(index);
        window.location.href = '/oa/oa_zxsxl.php?act=yunsuan&type={$type}&type_text={$type_text}&xingshi={$xingshi}&xingshi_text={$xingshi_text}&tiliang={$tiliang}&zushu={$zushu}&bishu={$bishu}&shijian={$shijian}&yusu={$yusu}&numbers=' + encodedNumbers + '&index=' + encodedIndex;
    }
    

    在成绩列表页添加索引参数

    修改成绩列表页的HTML结构,以便在chongzuo函数中可以获取到题目索引:

    <!-- 在每个重做按钮中添加数据属性 data-index -->
    <button onclick="chongzuo(this.dataset.index, '{%= question.question %}')" data-index="{%= index %}" style="height: 30px; font-size: 15px;">重做</button>
    

    运算页处理重做逻辑

    在运算页,你需要检查URL参数中是否有index参数,如果有,则表示这是重做题目,需要从questions数组中取出对应索引的题目,并更新其数据。

    修改generateQuestion函数

    首先,在generateQuestion函数开始处添加检查:

    function generateQuestion(numbers) {
        // 检查URL参数中是否有index
        const urlParams = new URLSearchParams(window.location.search);
        const index = urlParams.get('index');
    
        if (index !== null) {
            // 如果是重做题目,从questions数组中取出对应索引的题目
            const question = questions[parseInt(index)];
            // 清空输入框和问题区域
            document.getElementById('answerInput').value = '';
            document.getElementById('question').textContent = '';
    
            // 显示题目
            document.getElementById('question').textContent = question.question;
            // 设置输入框焦点
            $("input[name=answerInput]").focus();
    
            // 重做题目时,更新当前题目索引
            currentQuestionIndex = parseInt(index);
        } else {
            // 如果不是重做题目,执行原有逻辑
            // ... 省略原有逻辑 ...
        }
    }
    

    最终处理

    在用户完成重做并返回成绩列表页时,确保localStorage中的数据是最新的,同时成绩列表页应能够读取这些更新后的数据。

    通过上述步骤,你就能实现题目描述的功能需求,即保存之前的所有题目的同时,还能更新错题的结果。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 6月13日
  • 已采纳回答 6月13日
  • 创建了问题 6月13日

悬赏问题

  • ¥15 vue请求不到数据,返回状态200,数据为html
  • ¥15 访问url时不会自动调用其 Servlet的doGet()
  • ¥15 用白鹭引擎开发棋牌游戏的前端为什么这么难找
  • ¥15 MATLAB解决问题
  • ¥35 哪位专业人士知道这是什么原件吗?哪里可以买到?
  • ¥15 关于#c##的问题:treenode反序列化后获取不到上一节点和下一节点,Fullpath和Handle报错
  • ¥15 一部手机能否同时用不同的app进入不同的直播间?
  • ¥20 输入import torch显示Intel MKL FATAL ERROR,系统驱动1%,: Cannot load mkl_intel_thread.dll.
  • ¥15 点云密度大则包围盒小
  • ¥15 nginx使用nfs进行服务器的数据共享