react实现多步骤答题测验答卷考试代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：react实现多步骤答题测验答卷考试代码，每一题通过json变量，最终显示你的答题考试结果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #F9F6EF;
  background-image: repeating-linear-gradient(135deg, #0000 0 6px, #00000005 0 9px), radial-gradient(circle, #F9F6EF, #EBEBE3), radial-gradient(at 100% 20%, #5EB0E525, #0000 70%), radial-gradient(at 20% 20%, #F3D06025, #0000 70%), radial-gradient(at 20% 100%, #A5282C25, #0000 70%), radial-gradient(at 100% 100%, #AEE1CD25, #0000 70%);
  background-blend-mode: darken;
}

.app {
  width: 100vw;
  padding-block: 1rem;
  display: grid;
  justify-content: center;
  overflow: clip;
}

.card, .score-section {
  width: 50ch;
  background-color: white;
  padding: 2rem;
  border-radius: 0.5em;
  box-shadow: 0 0 1em #00000020;
}

.card {
  position: relative;
  transition: transform 0.5s ease;
}

/* Slide animations for the entire card */
.slide-enter-active {
  animation: slide-in 0.3s forwards;
}

/* Slide out to the left */
.slide-exit-active {
  animation: slide-out 0.3s forwards;
}

@keyframes slide-out {
  to {
    transform: translateX(-250%);
  }
  from {
    transform: translateX(0);
  }
}
@keyframes slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
.question-section {
  margin-bottom: 1em;
}

.question-count {
  margin-bottom: 0.5em;
  font-size: 1rem;
}

.question-text {
  margin-bottom: 1.2em;
  font-size: 1.5rem;
}

.answer-section {
  display: flex;
  flex-direction: column;
}

button {
  appearance: none;
  background-color: #0000;
  color: #1f2020;
  border: 2px solid #f3d060;
  padding: 0.8em;
  margin-bottom: 0.8em;
  border-radius: 0.35em;
  cursor: pointer;
  transition: 0.1s linear;
}

button:hover {
  background-color: #f3d060;
}

.score-section {
  font-size: 1.2rem;
}

/* Retake Quiz Button Style */
.retake-quiz-button {
  background-color: #0000;
  border: 2px solid #5eb0e5;
  color: #1f2020;
  padding: 0.8em;
  border-radius: 0.25em;
  cursor: pointer;
  transition: 0.1s linear;
}

.retake-quiz-button:hover {
  color: white;
  background-color: #0056b3;
}
</style>

  
  
  
</head>

<body translate="no">
  <div id="root"></div>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.7.18.13.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.18.2.0.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.18.2.0.js"></script>
      <script  type="text/babel">
      const App = () => {
  const questions = [
    {
      questionText: 'Which of the following is a correct way to define a JavaScript function?',
      answerOptions: [
        { answerText: 'function myFunc()', isCorrect: true },
        { answerText: 'def myFunc()', isCorrect: false },
        { answerText: 'myFunc = function()', isCorrect: false },
        { answerText: 'func myFunc()', isCorrect: false },
      ],
    },
    {
      questionText: 'What does "use strict" do in JavaScript?',
      answerOptions: [
        { answerText: 'It enables strict mode, which catches common coding mistakes and "unsafe" actions.', isCorrect: true },
        { answerText: 'It prevents the use of any JavaScript in the page.', isCorrect: false },
        { answerText: 'It automatically declares variables.', isCorrect: false },
        { answerText: 'It makes the code run faster.', isCorrect: false },
      ],
    },
    {
      questionText: 'Which of the following is NOT a JavaScript data type?',
      answerOptions: [
        { answerText: 'Number', isCorrect: false },
        { answerText: 'Boolean', isCorrect: false },
        { answerText: 'String', isCorrect: false },
        { answerText: 'Float', isCorrect: true },
      ],
    },
    {
      questionText: 'What is the output of the following: console.log(typeof NaN)?.........完整代码请登录后点击上方下载按钮下载查看