js+css实现单选题考试答题最后显示你的选择代码-html代码-BFW代码库

js+css实现单选题考试答题最后显示你的选择代码

代码语言：html

所属分类：其他

代码描述：js+css实现单选题考试答题最后显示你的选择代码，点击选项自动切换到下一题。

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

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

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

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:100,200,300,400,900'>

    <style>
        html, body {
        	font-family: 'Lato', sans-serif;
        	height: 100%;
        	min-height: 100%;
        	text-align: center;
        }
        
        .container {
        	width: 420px;
        	height: 100%;
        	margin-left: auto;
        	margin-right: auto;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        h1 {
        	text-transform: uppercase;
        	color: #444;
        	font-weight: 200;	
        }
        
        p {
        	color: #000;
        	font-size: 18px;
        	margin-left: 15px;
        	margin-right: 15px;
        	cursor: help;
        }
        
        .question {
        	background-color: #fff;
        	border: solid 1px #efefef;
        	transition: all ease-in-out .3s;
        }
        
        .question:hover {
        	border: solid 1px #dad;	
        }
        
        .question:hover h2 {
        	background-color: #dad;	
        }
        
        .results {
        	padding: 25px;
        }
        
        .hidden {
        	display: none;
        	opacity: 0;
        }
        
        h2 {
        	background-color: #efefef;
        	color: #fff;
        	margin: 0;
        	padding: 25px;
        	font-size: 15px;
        	text-transform: uppercase;
        	letter-spacing: 4px;
        	transition: background-color ease-in-out .3s;
        }
        
        ol {
        	text-align: left;
        	margin: 15px;
        	overflow: hidden;
        }
        
        li {
        	list-style-type: upper-alpha;
        	color: #999;
        	margin: 10px;
        	cursor: pointer;
        }
        
        li:hover {
        	color: #444;
        } button { background: #dad; color: #fff; border-width: 0; padding: 15px 20px; text-transform: uppercase; font-family:  'Lato', sans-serif; font-weight: bold; letter-spacing: 4px}
    </style>


</head>

<body translate="no">
    <div class='container'>
        <div class='question'>
            <h2>Question 1</h2>
            <p><code>var</code>, <code>let</code>, and <code>const</code> differ in what ways?</p>
            <ol>
                <li data-choice="A">One has function scope, one has block scope, one has lexical scope.</li>
                <li data-choice="B">One has function scope, two have block scope, one contains objects you cannot change.</li>
                <li data-choice="C">One has function scope, two have block scope, one cannot be reassigned but can be redeclared.</li>
                <li data-choice="D">One has function scope, two have block scope, one cannot be reassigned and cannot be redeclared.</li>
               </ol>
        </div>
        <div class='question hidden'>
            <h2>Question 2</h2>
            <p>Which isn't a JavaScript value type?</p>
            <ol>
                <li data-choice="A">Symbol</li>
                <li data-choice="B">Null</li>
                <li data-choice="C">Object</li>
                <li data-choice="D">Number</li>
                <li data-choice="E">Undefined</li>
               </ol>
        </div>
        <div class='question hidden'>
            <h2>Question 3</h2>
            <p>Which isn't a way to initialize an object?</p>
            <ol>
                <li data-choice="A">evaluating object literal syntax</li>
                <li data-choice="B">calling the Object constructor</li>
                <li data-choice="C">creating an instance of Object</li>
                <li data-choice="D">invoking the Object constructor's create method</li>
               </ol>
        </div>
        <div class='question hidden'>
            <h2>Question 4</h2>
            <p>Which is a value as well as a type?</p>
            <ol>
                <li data-choice="A">NaN</li>
                <li data-choice="B">Infinity</li>
                <li data-choice="C">Null and Undefined</li>
                <li data-choice="D">Boolean</li>
               </ol>
        </div>
        <div class='question hidden'>
            <h2>Question 5</h2>
            <p>What does it mean to say Function is first-class?</p>
            <ol>
                <li data-choice="A">Function declarations are hoisted and invoked before other code in the same function scope.</li>
                <li data-ch.........完整代码请登录后点击上方下载按钮下载查看