jquery+css实现答题多选小测验答卷多题代码
代码语言:html
所属分类:布局界面
代码描述:jquery+css实现答题多选小测验答卷多题代码
代码标签: jquery css 答题 多选 测验 答卷 多题 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap"); :root { --primary: #2196f3; --error: #d7010190; } * { font-family: "Varela Round", sans-serif; font-weight: 400; font-style: normal; box-sizing: border-box; } a { text-decoration: none; cursor: pointer; } body { display: flex; align-items: center; justify-content: center; color: #fff; background: url(//repo.bfw.wiki/bfwrepo/image/5e15dae696d11.png) no-repeat center center; /*background: url(https://static.wikia.nocookie.net/cube-movies/images/8/89/MV5BMTAyMjI4NTEzNTNeQTJeQWpwZ15BbWU3MDY3NjIxMjE%40._V1_SX640_SY720_.jpg) no-repeat center;*/ background-size: cover; width: 100vw; height: 100vh; overflow: hidden; } body:before { content: ""; position: absolute; z-index: -1; background: url(//repo.bfw.wiki/bfwrepo/image/5e15dae696d11.png) no-repeat center center; background-size: cover; width: 100vw; height: 100vh; filter: blur(5px); overflow: hidden; } .quizContainerPanel { text-align: center; width: 450px; margin: 0 auto; background: #253137e0; padding: 1em; border-radius: 1em; min-height: 580px; } .quizIntroPanel { width: 100%; height: 300px; display: flex; flex-direction: column; justify-content: space-between; justify-content: space-evenly; } .quizIntroPanel p { float: left; width: 100%; } .quizUserName { font-size: 22px; } .quizPanelResult { display: none; } .navQuestion { width: 100%; display: flex; justify-content: center; } /* .navQuestion:before { content: "Question "; color:var(--primary); margin-right: 0.5em; } */ .navQuestion span { padding: 0.2em; color: #fff; min-width: 25px; text-align: center; min-height: 25px; line-height: 19px; background: #607d8b; margin: 0 1px; border-radius: 5px; } /* .navQuestion span:first-of-type { color: var(--primary); padding: 0; } */ .navQuestion span.quizActiveQuestion { background: var(--primary) !important; border-radius: 2px; } .quizPanel { display: none; color: #d9d9d9; font-size: 18px; margin-bottom: 10px; } .quizPanel strong { font-size: 17px; } .quizPanel .question { color: #a6a6a6; } .quizPanel .question.quizSelected { color: var(--primary); } .quizResponses { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; padding: 0 85px 0 0; } .quizResponses .question { margin: 0 1em 0 0; } .quizResponses .question input { cursor: pointer; } .quizValidationLayer { margin-top: 20px; } .quizValidationLayer a.quizValidate { color: #fff; padding: 8px; background: var(--primary); cursor: pointer; } .quizPanel .question.thisCorrect { color: var(--error); color: #d70101; } .quizContinue { background: var(--primary); color: #fff; padding: 8px; cursor: pointer; border-radius: 2px; } .quizPlayGame { background: var(--primary); color: #fff; padding: 8px; cursor: pointer; } .quizReload { background: var(--primary); color: #fff; padding: 8px; cursor: pointer; margin-bottom: 20px; display: inline-block; border-radius: 2px; } .quizReload:hover { background: #fff; color: #212121; } .quizPanel .quizCorrect, .quizPanel .quizFail { background: var(--primary); font-size: 1.2em; margin-bottom: 1em; padding: 1em 0.5em; color: #fff; border-radius: 2px; } .quizPanel .quizFail { background: var(--error); } .quizTextResult { color: var(--primary); font-size: 1.2em; margin-bottom: 1em; } .quizCorrect { --primary: #4caf5090; } .quizCorrect small { color: #c8ff88; } .quizFail { --primary: #df0000; } .quizFail small { color: #fb877f; position: relative; margin-bottom: 5px; display: inline-block; } span.error { background: var(--error); color: #fff; } span.success { background: #00bf5f; color: #fff; } .quizValidationLayer a.quizValidate { pointer-events: none; opacity: 0.5; background: #607d8b; border-radius: 2px; } .quizResponses:has(input[type="checkbox"]:checked) + .quizValidationLayer a.quizValidate { pointer-events: visible; opacity: 1; background: var(--primary); } /* inputs */ .quizResponses { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; padding: 0 85px 0 0; min-height: 128px; } input[type="checkbox"] { opacity: 0; } input[type="checkbox"] + label { cursor: pointer; position: relative; } label:hover { color: #fff; } input[type="checkbox"] + label:before { content: ""; background: #607d8b; width: 20px; height: 20px; display: inline-block; top: 2px; position: relative; margin-right: 5px; border-radius: 2px; } input[type="checkbox"]:checked + label:before { background: #4caf50; background: var(--primary); } input[type="checkbox"]:checked + label:after, span.question.thisCorrect label:after { border: 2px solid #fff; border-color: #fff0 #fff0 #fff #fff; border-width: 0 0 3px 3px; content: ""; position: absolute; width: 10px; height: 6px; left: 4px; top: 2px; transform: rotate(-45deg); border-radius: 2px; } span.question.thisCorrect label:before { background: var(--error); } </style> </head> <body translate="no"> <div class="quizContainerPanel"> <h2>CUBE MOVIE QUIZ</H2> <!-- Intro --> <div class="quizIntroPanel"> <p class="quizUserName">Welcome!</p> <p>Simple quiz based on the movie 'Cube'.</p> <p><a class="quizPlayGame" href="#">START QUIZ</a></p> </div> <!-- Navigation --> <div class="navQuestion"> <span class="quizActiveQuestion">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>10</span> </div> <!-- Question 1 --> <div class="quizPanel Question01"> <p><strong>1:</strong>What nationality is the movie "CUBE" from?</p> <div class="quizResponses"> <span class="question"><input name="question1" id="question1a" value="english" data-value="0" type="checkbox" /> <label for="question1a">English</label> </span> <span class="question"><input name="question1" id="question1b" value="canadian" data-value="1" type="checkbox" /> <label for="question1b">Canadian</label> </span> <span class="question"><input name="question1" id="question1c" value="united-states" data-value="0" type="checkbox" /> <label for="question1c">United States</label> </span> </div> <div class="quizValidationLayer"> <div class="quizCorrect">CORRECT</div> <div class="quizFail">ERROR</div> <a class="quizValidate" href="#">VALIDATE</a> <a class="quizContinue" href="#">CONTINUE</a> </div> </div> <!-- Question 2 --> <div class="quizPanel Question02"> <p><strong>2:</strong> Which of the following is NOT a character in the movie?</p> <div class="quizResponses"> <span class="question"><input name="question2" id="question2a" value="alderson" data-value="0" type="checkbox" /> <label for="question2a">Alderson</label> </span> <span class="question"><input name="question2" id="question2b" value="robson" data-value="1" type="checkbox" /> <label for="question2b">Robson</label> </span> <span class="question"><input name="question2" id="question2d" value="somerwell" data-value="1" type="checkbox" /> <label for="question2d">Somerwell</label> </span> <span class="question"><input name="question2" id="question2c" value="rennes" data-value="0" type="checkbox" /> <label for="question2c">Rennes</label> </span> </div> <div class="quizValidationLayer"> <div class="quizCorrect">CORRECT</div> <div class="quizFail">ERROR</div> <a class="quizValidate" href="#">VALIDATE</a> <a class="quizContinue" href="#">CONTINUE</a> </div> </div> <!-- Question 3 --> <div class="quizPanel Question03"> <p><strong>3:</strong> How many different sets were needed to film this movie?</p> <div class="quizResponses"> <span class="question"><input name="question3" id="question3a" value="1" data-value="1" type="checkbox" /> <label for="question3a">1</label> </span> <span class="question"><input name="question3" id="question3b" value="5" data-value="0" type="checkbox" /> <label for="question3b">5</label> </span> <span class="question"><input name="question3" id="question3c" value="8" data-value="0" type="checkbox" /> <label for="question3c">8</label> </span> <span class="question"><input name="question3" id="question3d" value="14" data-value="0" type="checkbox" /> <label for="question3d">14</label> </span> </div> <div class="quizValidationLayer"> <div class="quizCorrect">CORRECT</div> <div class="quizFail">ERROR</div> <a class="quizValidate" href="#">VALIDATE</a> <a class="quizContinue" href="#">CONTINUE</a> </div> </div> <!-- Question 4 --> <div class="quizPanel Question04"> <p><strong>4:</strong> What was Quentin's profession before being placed in the cube?</p> <div class="quizResponses"> <span class="question"><input name="question4" id="question4a" value="architect" data-value="0" type="checkbox" /> <label for="question4a">Architect</label> </span> <span class="question"><input name="question4" id="question4b" value="doctor" data-value="0" type="checkbox" /> <label for="question4b">Doctor</label> </span> <span class="question"><input name="question4" id="question4c" value="police-officer" data-value="1" type="checkbox" /> <label for="question4c">Police Officer</label> </span> <span class="question"><input name="question4" id="question4d" value="student" data-value="0" type="checkbox" /> <label for="question4d">Student</label> </span> </div> <div class="quizValidationLayer"> <div class="quizCorrect">CORRECT</div> <div class="quizFail">ERROR</div> <a class="quizValidate" href="#">VALIDATE</a> <a class="quizContinue" href="#">CONTINUE</a> </div> </div> <!-- Question 5 --> <div class="quizPanel Question05"> <p><strong>5:</strong> What was the color of the room that Quentin, Holloway, Worth and Leaven all woke up in?</p> <div class="quizResponses"> <span class="question"><input name="question5" id="question5a" value="blue" data-value="0" type="checkbox" /> <label for="question5a">Blue</label> </span> <span class="question"><input name="question5" id="question5b" value="white" data-value="1" type="checkbox" /> <label for="question5b">White</label> </span> <span class="question"><input name="question5" id="question5c" value="green" data-value="0" type="checkbox" /> <label for="question5c">Green</label> </span> <span class="question"><input name="question5" id="question5d" value="red" data-value="0" type="checkbox" /> <label for="question5d">Red</label> </span> </div> <div class="quizValidationLayer"> <div class="quizCorrect">CORRECT</div> <div class="quizFail">ERROR</div> <a class="quizValidate" href="#">VALIDATE</a> <a class="quizContinue" href="#">CONTINUE</a> </div> </div> <!-- Question 6 --> <div class="quizPanel Question06"> <p><strong>6:</strong> What did the group use to test for motion-activated traps?</p> <div class="quizResponses"> <span class="question"><input name="question6" id="question6a" value="hats" data-value="0" type="checkbox" /> <label for="question6a">Hats</label> </span> <sp.........完整代码请登录后点击上方下载按钮下载查看
网友评论0