网页开发-问答题_显示题目-02

最新推荐文章于 2024-06-16 12:11:30 发布

k524274865

最新推荐文章于 2024-06-16 12:11:30 发布

阅读量138

点赞数

分类专栏： HTML 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/k524274865/article/details/84760501

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在上一节，编写main.css的时候，是把整个quiz隐藏起来了，而这里把隐藏的题目一个一个列举出来，

把main.css改为

body{
  margin-left:50px;
}
#question1, #question2, #question3, #question4, #question5, 
#question6, #question7, #question8, #question9, #question10
{
  display:none;
}

然后再编写一个文件game.js

if(jQuery){
   $("#question1").show();
}

index.html内容如下

<!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 << 22 = ...</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>
     <script src="jquery.js"/>
     <script src="game.js"/>  
  </body>  
</html>

上方粗体，斜体是加在上一节代码里。

在main.css中，其他可以不用一个一个地隐藏，也可以使用类选择器。

上方的jquery.js在网上下载即可

k524274865

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页开发-问答题_显示题目-02

在上一节，编写main.css的时候，是把整个quiz隐藏起来了，而这里把隐藏的题目一个一个列举出来，把main.css改为body{ margin-left:50px;}#question1, #question2, #question3, #question4, #question5, #question6, #question7, #question8, #que...
复制链接

扫一扫