4.4　整人游戏：我不是弱智！

笔者以前经常被QQ控件或各种论坛上的某个标题所吸引，打开之后却发现网页中弹出一个对话框，必须不断地点击烦人的按钮无数次才能关闭这个页面。当时也曾经在网上搜索过相应的教程，可惜一直都没有成功。时隔多年，笔者又想起了当年的“悲惨经历”，于是决定在这里与读者分享下面的例子。

在Sublime中编辑4个文件，分别为index.html、question.html、confirm.html、result.html。下面给出具体代码。

【范例4-5　游戏的开始页面index.html】

【范例4-6　询问读者是否是弱智的页面question.html】

【范例4-7　另一个询问页面confirm.html】

【范例4-8　游戏结束页面result.html】

运行后的结果如图4-6~图4-9所示。

首先单击“开始游戏”按钮，就会看到页面中有文字询问用户是否承认自己是弱智，若是愿意承认自己是弱智，则可以转到图4-9所示的页面，游戏结束，否则一直循环。

各位聪明而又细心的读者想必已经发现，本节使用的链接代码中又加入了一个新的属性data-rel="dialog"。这句代码是干什么用的呢？看上去并没有产生特殊效果。

首先dialog就是jQuery Mobile已经给用户定义好了对话框控件，使用它可以实现一些与一般页面不同的交互效果，读者可以自己尝试。当运行到图4-9所示的游戏结束页面时，点击手机上的返回键，会发现页面返回到了图4-6所示的界面。然后去掉data-rel="dialog"，再看效果会发现，点击返回键后会完整地重复图4-7以及图4-8所示的界面。

读者可以想象，这跟我们在PC上浏览网页时的返回按钮非常相似，由于浏览器会使用哈希来记录已经访问过的页面，从而使其在返回时能够记录已经访问过的页面。而对于以对话框形式打开的页面，则不记录其哈希值，浏览器将不会对这些页面进行记录。

当然，有一部分人会通过“返回”的方式来重复答题以获得虚假的高分。如果在这里使用对话框控件，就能比较容易地解决这一难题。