1.3　第三步：重现题目

所有题目都消失后，需要采用某种办法将其重新显示出来。这里采用一种间接的方式：先把本章及后面9章所用的10个程序包引入网页之中。然后，逐个检查这些程序包是否已经正确加载，每确认完一个程序包，我们就把原来隐藏的一道题目显示出来。

在核查这些程序包是否正确载入之前，需要先确认浏览器是否能正常载入JavaScript脚本。把程序清单1.4中加粗的那一行代码添加到index.html文件靠近末尾处。

程序清单1.4　加载首个外部JavaScript文件

这样就可以把game.js这个JavaScript文件加载进来了。接下来，需要创建该文件。在main.css与index.html所处的目录中新建一个文件，将其命名为game.js，并把程序清单1.5中的代码加进去。

程序清单1.5　game.js文件

这段代码会在两个地方打印信息。用浏览器打开index.html文件后，会弹出警示窗，这是第一个打印信息的地方，它比较明显。而代码第二行的console.log则会向JavaScript控制台输出信息，JavaScript控制台是开发者不可或缺的工具。关于如何启动并运行此控制台，请参阅附录B。

解决好这个问题之后，接下来就该载入jQuery了。要想获取此程序库，最快的办法是去jquery.com网站下载。至于如何通过网页把它下载下来，由你决定。笔者所用的办法是，直接点击网页上那个最大、最醒目的按钮，然后会跳转到另外一个页面，此页面专门用于显示jQuery的全部代码。新建一个名为jquery.js的文件，把网页中的代码复制下来，并粘贴到这个新文件里，然后将其保存。

网站上还有其他按钮，点击之后，可以按照传统方式下载源码文件。虽然具体如何下载你可以自己决定，但是一定要把它放在文件系统中正确的目录里面（也就是把它和index.html、main.css、game.js放在同一个目录里）。

把jquery库的源文件放好之后，将程序清单1.6中的粗体代码加入index.html文件末端。请注意，jquery源文件的名字要与index.html文件里所写的名字一致。

程序清单1.6　将jQuery程序库引入index.html文件

假如你的jquery源文件不叫jquery.js，那么必须修改index.html所引用的文件名，使二者相符，这样才能正确加载。

在继续往下写之前，先调整一下CSS文件。上一节中的CSS文件写得太粗略了。这次我们不直接把整个quiz隐藏掉，而是像程序清单1.7这样，写得具体一些，把要隐藏的每道题目逐个列出来。

程序清单1.7　不直接隐藏整个quiz，而是逐个隐藏每道题目

把原来写的#quiz这个id选择器删掉，改为一系列以question开头的id选择器，并用逗号将其隔开。也可以不这么做，而是为这些问题所在的每个<div>元素都添加相同的class属性，然后采用“点选择器”（dot selector）来选取它们。不过，大家还是了解一下此处所采用的这种选择器列表写法。

修改完代码之后，CSS这个“坏家伙”就会把所有题目都隐藏起来了，然后，我们得用jQuery这个“好人”把隐藏掉的问题重新显示出来。要实现此功能，需要编辑game.js文件，把程序清单1.8中的这段代码加进去，并把文件里原来写的那些代码删掉。

程序清单1.8　若能正常加载jQuery，则将第一道题显示出来

第一行代码先判断jQuery库是否已经加载。如果加载好了，那么就执行第二行代码。这行代码调用jQuery的$函数，在#question1这个CSS选择器左右两端加上引号与括号，将其作为参数传给此函数。然后，执行jQuery的show函数，将第一道题的样式由display:none改为display:block。

保存game.js文件，并用浏览器打开index.html，你会看到，第一道题又重新显示出来了。