2024.5.30

今天继续完成结组作业，对于网络安全部分的卡片答题做了几张尝试，最后决定通过弹窗的方式将题目显示出来，并在弹窗内放置一个文本框进行答题，前端代码如下：

<div class="overlay" id="overlay"></div>
<div class="popup" id="popup">
  <form id="solvepro">
  <span class="icon-close" onclick="close1()"><ion-icon name="close"></ion-icon></span>
    <div id="propro">题目：<%=session.getAttribute("pp")%></div>

    <div style="text-align: center;width: inherit">
      <input  id="tanswer" type="text" style="width:fit-content" value="" placeholder="答案">
    </div>
    <br>
    <div style="text-align: center"><button id="answersub" type="submit">提交</button></div>

    <br>
<%--    <div style="text-align: center"><button onclick="close1()">关闭</button></div>--%>
  </form>

  <div class="loader-container">
    <div id="loader" class="loader-106"></div>
  </div>

</div>

而对于前端动态改变效果，我使用JavaScript代码进行实现，代码如下：

document.getElementById("solvepro").addEventListener("submit",async function(event){
      event.preventDefault();//阻止表单默认提交行为

      //获取表单数据
      var formData=new FormData(this);

      var tproblem=document.getElementById("propro").innerText;
      var tanswer=document.getElementById("tanswer");
      var tusername=document.querySelector("#loginregister-button").innerText;

      const overlay=document.getElementById('overlay');
      const popup=document.getElementById('popup');

      //检查是否进行了用户登录
      if(tusername=="登录"){
        alert("请先进行登录后再操作！");

        overlay.style.display='none';
        popup.style.display='none';

        var i,page;
        document.getElementById("wrapp").style.display="none";
        // var wrapper=document.getElementById("wrapper");
        page=document.getElementsByClassName("page");
        for(i=0;i<page.length;i++){
          page[i].style.display="none";
        }
        wrapper.style.display="flex";

        return;
      }

      //检查用户是否输入了答案
      if(tanswer.value=="答案"){
        alert("请输入你的答案！");
        return;
      }

      document.getElementById("loader").style.display="flex";
      const response = await fetch('FinishServlet',{
        method:'POST',
        headers:{
          'Content-Type':'application/json'
        },
        body:JSON.stringify({
          problem:tproblem,
          answer:tanswer.value,
          username:tusername,
        })
      });

      document.getElementById("loader").style.display="none";
      //检查是否收到了相应
      if(!response.ok){
        alert("提交失败，请检查网络后重试");
        return;
      }

      //解析相应的JSON数据
      const responseData = await response.json();
      var num=responseData.number;
      if(num==="1"){
        alert("提交成功，请再解答4题");
        overlay.style.display='none';
        popup.style.display='none';
      }
      else if(num==="2"){
        alert("提交成功，请再解答3题");
        overlay.style.display='none';
        popup.style.display='none';
      }
      else if(num==="3"){
        alert("提交成功，请再解答2题");
        overlay.style.display='none';
        popup.style.display='none';
      }
      else if(num==="4"){
        alert("提交成功，请再解答1题");
        overlay.style.display='none';
        popup.style.display='none';
      }
      else if(num==="5") {
        alert("恭喜你，完成了所有的题目！");

        var qtext2=document.getElementById("qtext2");
        var tcontainer=document.getElementById("tcontainer");
        var wrapp=document.getElementById("wrapp");

        tcontainer.style.display="none";
        var temp=responseData.result;
        console.log(temp);
        qtext2.innerHTML="下面是你的回答结果";
        document.getElementById("result2").innerText=responseData.result;
        overlay.style.display='none';
        popup.style.display='none';

      }

    });