react实现单选问答答题答卷代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：react实现单选问答答题答卷代码

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

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

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

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

.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);
  }
}
.app {
  display: grid;
  place-content: center;
  overflow-x: clip;
}

.card, .score-section {
  width: 50ch;
  background-color: #5eb0e5;
  color: #ebebe3;
  padding: 2rem;
  display: grid;
  gap: 1em;
  box-shadow: 0 0 0 0.25em #1f2020, 0.5em 0.5em 0 0.25em #1f2020;
}

.answer-section {
  display: grid;
  gap: 1em;
}

button {
  appearance: none;
  all: initial;
  border: 1px solid;
  background-color: #e1f8dc;
  padding: 0.35em 0.8em;
  box-shadow: 0.25em 0.25em 0 0 #1f2020;
  transition: 0.1s ease;
  will-change: translate, box-shadow;
  font-family: system-ui, sans-serif;
}

button:active {
  translate: 0.25em 0.25em;
  box-shadow: -0.1em -0.1em 0 0.2em #1f2020, inset 0.2em 0.2em 0 #1f202050;
}

button:hover {
  background-color: #f9f6ef;
  color: #1f2020;
}

.question-count {
  font-size: 0.9rem;
  color: #e1f8dc;
}
.question-count span {
  font-size: 1rem;
  color: #f9f6ef;
}

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

.answer-section {
  font-size: 1.1rem;
}

.score-section {
  background-color: #e1f8dc;
  color: #1f2020;
}
.score-section p {
  font-size: 2rem;
}
.score-section button {
  width: fit-content;
  background-color: #a5282c;
  color: #fff;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  align-content: center;
  font-family: system-ui, sans-serif;
  background-color: #f3d060;
  background-size: 100%, 50px 50px;
  background-image: radial-gradient(circle at bottom right, #f3c050c0 0%, #f3d060c0 50%), repeating-linear-gradient(45deg, #1f2020 0, #1f2020 1.5px, #f3d060 0, #f3d060 50%);
}
</style>


  
  
</head>

<body translate="no">

<div id="root"></div>
<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>
    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)?',
    answerOptions: [
    { answerText: '"number"', isCorrect: true },
    { answerText: '"NaN"', isCorrect: false },
    { answerText: '"undefined"', isCorrect: false },
    { answerText: '.........完整代码请登录后点击上方下载按钮下载查看