首页  »   网页设计

网页开发-问答题_暗藏题目-01

网友分享于:2013-01-21  浏览:0次
网页开发-问答题_隐藏题目-01

一、编写问答题

二、把题目隐藏起来

三、用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选择器“#”。还有其他选择器,每样选择器都有自己的优势

 

相关解决方案

最新解决方案