一、编写问答题
二、把题目隐藏起来
三、用CSS样式表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Quiz</title> <!--在本目录下,加入了main样式--> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <h1>Quiz</h1> <div id="quiz"><!--此id用在main样式表中--> <div id="question1"> <div class="question">Which is not a main file type that we use to make websites?</div> <input type="radio" name="question1" value="a"/> <label>.html</label> <input type="radio" name="question1" value="b"/> <label>.exe</label> <input type="radio" name="question1" value="c"/> <label>.js</label> <input type="radio" name="question1" value="d"/> <label>.css</label> </div> <br /> <div id="question2"> <div class="question">A JavaScript object is wrapped by what charaters?</div> <input type="radio" name="question2" value="a"/> <label>[]</label> <input type="radio" name="question2" value="b"/> <label>;;</label> <input type="radio" name="question2" value="c"/> <label>{}</label> <input type="radio" name="question2" value="d"/> <label>()</label> </div> <br /> <div id="question3"> <div class="question">Moles are which of the following?</div> <input type="radio" name="question3" value="a"/> <label>Omniverous</label> <input type="radio" name="question3" value="b"/> <label>Adorable</label> <input type="radio" name="question3" value="c"/> <label>Whackable</label> <input type="radio" name="question3" value="d"/> <label>All of the above</label> </div> <br /> <div id="question4"> <div class="question">In Japanese "か" is prounounced...</div> <input type="radio" name="question4" value="a"/> <label>ka</label> <input type="radio" name="question4" value="b"/> <label>ko</label> <input type="radio" name="question4" value="c"/> <label>ke</label> <input type="radio" name="question4" value="d"/> <label>ki</label> </div> <br /> <div id="question5"> <div class="question">The gravitational constant on earth is approximately...</div> <input type="radio" name="question5" value="a"/> <label>10m/s^2</label> <input type="radio" name="question5" value="b"/> <label>.809m/s^2</label> <input type="radio" name="question5" value="c"/> <label>9.81m/s^2</label> <input type="radio" name="question5" value="d"/> <label>84.4m/s^2</label> </div> <br /> <div id="question6"> <div class="question">45 (in base 10) is what in binary (base 2)?</div> <input type="radio" name="question6" value="a"/> <label>101101</label> <input type="radio" name="question6" value="b"/> <label>110011</label> <input type="radio" name="question6" value="c"/> <label>011101</label> <input type="radio" name="question6" value="d"/> <label>101011</label> </div> <br /> <div id="question7"> <div class="question">4 << 2 = ...</div> <input type="radio" name="question7" value="a"/> <label>16</label> <input type="radio" name="question7" value="b"/> <label>4</label> <input type="radio" name="question7" value="c"/> <label>2</label> <input type="radio" name="question7" value="d"/> <label>8</label> </div> <br /> <div id="question8"> <div class="question">Given the lengths of two sides of a right triangle (one with a 90 degree angle), how would you find the hypotenuse?</div> <input type="radio" name="question8" value="a"/> <label>Pi*Radius^2</label> <input type="radio" name="question8" value="b"/> <label>Pythagorean Theorem</label> <input type="radio" name="question8" value="c"/> <label>Calculator?</label> <input type="radio" name="question8" value="d"/> <label>Sin(side1 + side2)</label> </div> <br /> <div id="question9"> <div class="question">True or False: All games must run at at least 60 frames per second to be any good.</div> <input type="radio" name="question9" value="a"/> <label>True</label> <input type="radio" name="question9" value="b"/> <label>False</label> </div> <br /> <div id="question10"> <div class="question">Using a server can help you to...</div> <input type="radio" name="question10" value="a"/> <label>hide your code.</label> <input type="radio" name="question10" value="b"/> <label>have a performant game.</label> <input type="radio" name="question10" value="c"/> <label>create shared experiences for players.</label> <input type="radio" name="question10" value="d"/> <label>all of the above.</label> </div> </div> </body> </html>
隐藏题目,需要在main.css文件中编写以下代码
#quiz{ display:none; }
这里用到了id选择器“#”。还有其他选择器,每样选择器都有自己的优势