去年看了一下《高效程序员的45个习惯》，觉得不错，就想着先把它的目录背下来，现在记得也差不多了，想巩固一下。老是在纸上写来写去，觉得不方便，就想着写一个小程序，尽量简单的，在电脑上面默写，So,下面的程序经过想想、修修改改，就出来了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">
<title>吴家龙 -- 《高效程序员的45个习惯》目录默写</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
//保存试题的索引
var curIndex = 0;
//保存试题 {id:"题目",content:[内容]}
var channel = [];
channel.push({id:"第2章 态度决定一切",content:["1.做事","2.欲速则不达","3.对事不对人","4.排除万难，奋勇前进"]});
channel.push({id:"第3章 学无止境",content:["5.跟踪变化","6.对团队投资","7.懂得丢弃","8.打破砂锅问到底","9.把握开发节奏"]});
channel.push({id:"第4章 交付用户想要的软件",content:["10.让客户做决定","11.让设计指导而不是操纵开发","12.合理地使用技术","13.保持可以发布","14.提早集成，频繁集成","15.提早实现自动化部署","16.使用演示获得频繁反馈","17.使用短迭代，增量发布","18.固定的价格意味着背叛承诺"]});
channel.push({id:"第5章 敏捷反馈",content:["19.守护天使","20.先用它，再实现它","21.不同环境就有不同问题","22.自动验收测试","23.度量真实的进度","24.倾听用户的声音"]});
channel.push({id:"第6章 敏捷编码",content:["25.代表要清晰地表达意图","26.用代码沟通","27.动态评估取舍","28.增量式编程","29.保持简单","30.编写内聚的代码","31.告知，不要询问","32.根据契约进行替换"]});
channel.push({id:"第7章 敏捷调试",content:["33.记录问题解决日志","34.警告就是错误","35.对问题各个击破","36.报告所有异常","37.提供有用的错误信息"]});
channel.push({id:"第8章 敏捷协作",content:["38.定期安排会面时间","39.架构师必须写代码","40.实行代码集体所有制","41.成为指导者","42.允许大家自己想办法","43.准备好后再共享代码","44.做代码复查","45.及时通报进展与问题"]});
channel.push({id:"第9章 尾声：走向敏捷",content:["9.1 只要一个新的习惯","9.2 拯救濒临失败的项目","9.3 引入敏捷——管理者指南","9.4 引入敏捷——程序员指南"]});
//显示全文目录
function displayAll(){
$("#container").html("");
for(var p in channel){
var cur = channel[p];
$("#container").append("<h4 style='color:red; font-weight:bold;'>" + cur.id + "</h4>");
for(var p1 in cur.content){
$("#container").append("<p> " + cur.content[p1] + "</p>");
}
$("#container").append("<br/>");
$("#container").append("<input type='button' value='开始测试' onclick='initExam();'/>");
}
}
//初始化试卷 -- 严格意义上不算。
function initExam(){
$("#container").html("");
//$("#container").append("<a href='javascript:window.location=window.location;'>返回全文目录</a><br/><br/>");
$("#container").append("<a href='javascript:displayAll();'>返回全文目录</a><br/><br/>");
$("#container").append("<div id='divAnswerInputArea'></div>");
next();
}
//重置答案
function resetAnswer(src){
$("[name=answer]").html("");
$("#divAnswerArea").remove();
$("[name=checkAnswer]").show();
}
//检查答案的正确性
function checkAnswer(src){
$(src).hide();
var iRightCount = 0;
var curQuestion = channel[curIndex];
var inputAnswers = $("[name=answer]").html().split(/\r\n/g);//以回车换行对输入的答案进行分隔
$("#container").append("<div id='divAnswerArea'></div>");
$("#divAnswerArea").append("<input type='button' value='重新回答' onclick='resetAnswer(this);'/>");
//输出正确答案
for(var p in curQuestion.content){
$("#divAnswerArea").append("<h3 style='color:green'>" + curQuestion.content[p] + "</h3>");
}
//判断输入的答案是否正确
for(var p1 in inputAnswers){
var isMatched = false;
for(var p in curQuestion.content){
if(curQuestion.content[p].replace(",","").replace("，","").replace("—","") == inputAnswers[p1].replace(",","").replace("，","").replace("—","")){
iRightCount = parseInt(iRightCount) + 1;
isMatched = true;
break;
}
}
if(!isMatched){
inputAnswers[p1] = "<h3 style='color:red;'>" + inputAnswers[p1] + "</h3>";
}else{
//inputAnswers[p1] = "<h3 style='color:green;'>" + inputAnswers[p1] + "</h3>\r\n";
inputAnswers[p1] = "<h3>" + inputAnswers[p1] + "<h3>";
}
}
if(iRightCount == curQuestion.content.length){
$("#divAnswerArea").append("<h3>恭喜，答案<span style='color:Green'>正确</span></h3>");
}else{
$("#divAnswerArea").append("<h3>非常遗憾，答案<span style='color:Red'>不正确</span>，请参照给出的提示。</h3>");
$("[name=answer]").html("").attr("disable","false");
for(var p in inputAnswers){
$("[name=answer]").html($("[name=answer]").html() + inputAnswers[p]);
}
}
}
function specialStyle(content){
return "<font color='red'>" + content + "</font>";
}
//移动到下一条
function next(){
if(curIndex>=channel.length-1){
curIndex = 0;
}else{
curIndex = parseInt(curIndex) + 1;
}
$("#divAnswerArea").remove();
$("#divAnswerInputArea").html("");
$("#divAnswerInputArea").append(specialStyle( channel[curIndex].id )+ " 的内容是什么？每行一条，顺序任意");
$("#divAnswerInputArea").append("<div style='500px; margin:10px; border:2px solid blue; border-top:dotted 3px red;padding:15px;'><table border=0><tr rowspan='2'><td><textarea cols='60' rows='10' name='answer'></textarea></td></tr><tr><td><input type='button' value='上一条' onclick='previous();'/></td><td><input type='button' value='下一条' onclick='next();'/></td></tr></table></div>");
$("#divAnswerInputArea").append("<input name='checkAnswer' type='button' value='查看正确答案' onclick='checkAnswer(this);'/>");
}
//移动到上一条
function previous(){
if(curIndex<=0){
curIndex = channel.length-1;
}else{
curIndex = curIndex - 1;
}
$("#divAnswerArea").remove();
$("#divAnswerInputArea").html("");
$("#divAnswerInputArea").append(specialStyle( channel[curIndex].id )+ " 的内容是什么？每行一条，顺序任意");
$("#divAnswerInputArea").append("<div style='500px; margin:10px; border:2px solid blue; border-top:dotted 3px red;padding:15px;'><table border=0><tr rowspan='2'><td><textarea cols='60' rows='10' name='answer'></textarea></td></tr><tr><td><input type='button' value='上一条' onclick='previous();'/></td><td><input type='button' value='下一条' onclick='next();'/></td></tr></table></div>");
$("#divAnswerInputArea").append("<input name='checkAnswer' type='button' value='查看正确答案' onclick='checkAnswer(this);'/>");
}
$(function(){
displayAll();
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
