react实现自适应带进度答题考试问答表单试卷并显示结果和错题答案的效果代码
代码语言:html
所属分类:表单美化
代码描述:react实现自适应带进度答题考试问答试卷表单,并在回答完全部题目的时候显示最终结果和错题答案的效果代码
代码标签: react 自适应 答题 试卷 问答 考试 答案
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap"); * { box-sizing: border-box; font-family: "Be Vietnam Pro", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button { font-family: "Be Vietnam Pro", sans-serif; } body { padding: 0 10vh; background-color: #1c1d20; background: #95e9e3; background: linear-gradient(62deg, #95e9e3 30%, #1fbed2 41%, #0b2632 85%); font-family: "Be Vietnam Pro", sans-serif; width: 100%; height: 100vh; overflow: hidden; display: flex; } body:after { content: ""; background-image: url(//repo.bfw.wiki/bfwrepo/image/6171f56b4f166.png); position: absolute; left: 0; top: 0; width: 100%; z-index: -1; height: 100%; background-repeat: no-repeat; transition: 0.3s; background-size: cover; background-attachment: fixed; background-position: center; } @media (max-width: 980px), (max-height: 580px) { body { padding: 60px 20px; } } #app { width: 100%; height: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; } .game-started:after { transform: translateX(calc(-50% - 100px)); } @media (max-width: 980px), (max-height: 580px) { .game-started:after { transform: scale(1.2); } } .game { position: relative; max-width: 600px; width: 100%; height: 36vh; min-height: -webkit-max-content; min-height: -moz-max-content; min-height: max-content; margin: 32vh auto; box-shadow: 0 0 80px black, 0 0 0 16px rgba(152, 236, 255, 0.1); border-radius: 12px; overflow: hidden; scroll-behavior: smooth; display: flex; transition: 0.3s; } @media (max-width: 980px), (max-height: 580px) { .game { margin: auto; height: 52vh; flex-direction: column; overflow: auto; align-items: flex-start; } } .game[data-game-started] { max-width: 1200px; margin: 15vh auto; height: 70vh; } @media (max-width: 980px), (max-height: 580px) { .game[data-game-started] { height: auto; overflow: auto; margin: auto; max-height: 100%; } } .game[data-game-started] .intro { width: calc(50% - 100px); transition: 0.3s; } @media (max-width: 980px), (max-height: 580px) { .game[data-game-started] .intro { width: 100%; height: auto; } } .game[data-game-started] .intro-inner { padding: 20px; } @media (max-width: 980px), (max-height: 580px) { .game[data-game-started] .intro-inner { padding: 40px 20px; } } .game[data-game-started] .game-area { flex-shrink: 0; width: calc(50% + 100px); display: flex; align-items: center; flex-wrap: wrap; transition: 0.3s; flex-grow: 1; } @media (max-width: 980px), (max-height: 580px) { .game[data-game-started] .game-area { width: 100%; padding: 20px; } } .game-area { background-color: #fff; overflow: auto; padding: 40px; } @media (max-width: 980px), (max-height: 580px) { .game-area { padding: 0; } } .intro { background-size: cover; height: 100%; width: 100%; flex-shrink: 0; color: #fff; background-position: center; position: relative; display: flex; align-items: center; background: linear-gradient(251deg, #00b8ff52 -53%, rgba(255, 255, 255, 0) 65%); justify-content: center; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); } .intro-inner { text-align: center; padding: 30px 60px; width: 100%; } .intro-title { margin: 0; font-size: 42px; text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.35); } .intro-desc { opacity: 0.8; font-weight: 300; } .intro-button { background-color: #1f8197; border: 0; padding: 12px 26px; color: #fff; border-radius: 4px; font-size: 18px; transform: translateY(20px); cursor: pointer; font-weight: 500; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } .indicator { display: flex; justify-content: center; position: relative; max-width: 80%; margin: 20px auto 0; } .indicator-item { width: 12px; height: 4px; border-radius: 6px; } .indicator-item + .indicator-item { margin-left: 8px; } .indicator-item:last-child:before { background: #fff; content: ""; width: 12px; height: 4px; position: absolute; border-radius: 6px; left: 0; top: 0; opacity: 0; } .indicator-item:last-child:after { content: "COMPLETED"; position: absolute; width: 100%; left: 0; font-size: 14px; letter-spacing: 1px; font-weight: 600; top: 0; opacity: 0; } .indicator-item:last-child[style*="255, 255)"]:before { -webkit-animation: indicator 1s both; animation: indicator 1s both; } .indicator-item:last-child[style*="255, 255)"]:after { -webkit-animation: indicator-completed 0.4s 0.8s both; animation: indicator-completed 0.4s 0.8s both; } @-webkit-keyframes indicator { 0%, 100% { opacity: 1; } 50% { height: 6px; } 100% { height: 40px; top: -2px; left: -2px; background-color: #1f8197; } 80% { background-color: #fff; } 50%, 100% { width: calc(100% + 1px); } } @keyframes indicator { 0%, 100% { opacity: 1; } 50% { height: 6px; } 100% { height: 40px; top: -2px; left: -2px; background-color: #1f8197; } 80% { background-color: #fff; } 50%, 100% { width: calc(100% + 1px); } } @-webkit-keyframes indicator-completed { 70%, 100% { opacity: 1; } 100% { transform: translatey(10px); } } @keyframes indicator-completed { 70%, 100% { opacity: 1; } 100% { transform: translatey(10px); } } .question { display: flex; height: 100%; flex-direction: column; width: 100%; } .question-inner { margin: auto 0; } .question-answers { padding: 0; list-style: none; } .question li, .question-text { opacity: 0; } .question-button { background-color: #1f8197; border: 0; padding: 14px 26px; color: #fff; border-radius: 4px; margin-top: 20px; font-size: 16px; cursor: pointer; font-weight: 500; } .question-text { color: #333; margin: 20px 0; } .question input { display: none; } .question label { display: flex; padding: 12px 24px 12px 16px; font-size: 15px; border-radius: 4px; overflow: hidden; align-items: center; border: 2px solid #dde7eb; color: #333; cursor: pointer; position: relative; } .question label:before { height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%23333' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); content: ""; background-size: cover; opacity: 0.5; transition: 0.3s; flex-shrink: 0; position: absolute; right: -16px; top: 50%; transform: translatey(-50%); width: 16px; } .question li + li { margin-top: 10px; } .question input:checked + label { background-color: #dde7eb; } .question input:checked + label:before { transform: translatex(-24px) translatey(-50%); } .is-true label { background-color: rgba(31, 129, 151, 0.2); border-color: #1f8197; } .is-true label:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%231f8197' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); opacity: 1; transform: translatex(-24px) translatey(-50%); } .correction { width: 100%; } .correction [data-selected=true].is-true label { border-color: #0ca50c; background-color: #a3ebab; } .correction [data-selected=true].is-true label:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%230ca50c' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); opacity: 1; transform: translatex(-24px) translatey(-50%); } .correction [data-selected=true]:not(.is-true) label { background-color: #ffd5dc; border: 2px solid #ff6161; } .correction [data-selected=true]:not(.is-true) label:before { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%23ff6161' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); } .correction input { pointer-events: none; } .result { transition: 0.3s; display: flex; flex-direction: column; width: 100%; max-width: 80%; margin: auto; height: 0; overflow: hidden; } .result-item { display: inline-flex; flex-direction: row-reverse; justify-content: space-between; width: 100%; padding: 5px 10px; } .result-item + .result-item { border-top: 1px solid rgba(255, 255, 255, 0.05); } .result-count { font-size: 32px; font-weight: 600; } .result-text { font-size: 12px; letter-spacing: 2px; opacity: 0.8; display: flex; font-weight: 500; align-items: center; line-height: 1; } .result-text svg { margin-right: 8px; position: relative; top: -1px; } .result-item.is-correct { color: #42ff73; } .result-item.is-wrong { color: #ffa2a2; } [data-game-finished] .result { opacity: 1; margin-top: 40px; padding-top: 20px; display: flex; -webkit-animation: result 0.6s 0.5s both; animation: result 0.6s 0.5s both; } [data-game-finished] .result-item { -webkit-animation: result-item 0.6s 1.3s both; animation: result-item 0.6s 1.3s both; } [data-game-finished] .result-item.is-correct { -webkit-animation-delay: 1s; animation-delay: 1s; } [data-game-finished] .result-item.is-wrong { -webkit-animation-delay: 1.15s; animation-delay: 1.15s; } [data-game-finished] .restart-button { display: block; } .correction .question + .question { margin-top: 30px; } @-webkit-keyframes result { 0% { height: 0; } 100% { height: 150px; } } @keyframes result { 0% { height: 0; } 100% { height: 150px; } } @-webkit-keyframes result-item { 0% { opacity: 0; transform: translateY(10ox); } } @keyframes result-item { 0% { opacity: 0; transform: translateY(10ox); } } .restart-button { height: 40px; border: 1px solid rgba(255, 255, 255, 0.4); margin: 30px auto 0; background-color: transparent; color: #fff; border-radius: 4px; padding: 0 16px; font-weight: 500; transition: 0.3s; cursor: pointer; display: none; -webkit-animation: result-item 0.4s 1.45s both; animation: result-item 0.4s 1.45s both; } .restart-button:hover { background-color: rgba(255, 255, 255, 0.1); } </style> </head> <body> <div id="app"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.8.0.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script> <script > const { useEffect, useRef, useState} = window.React; const { render } = window.ReactDOM; const questions = [ { id: 0, text: "What does CSS stand for?", answ.........完整代码请登录后点击上方下载按钮下载查看
网友评论0