最近有一个需求,要求用js实现网上的打字测试,测试文稿是给定的一段程序代码,上面包含程序中的各种符号,而且包含汉字的注释,要求时刻监听测试者的打字情况,记录正确率和打字速度,最后还要计算测试者输入的文稿和原文稿的相似度。
请问各位高手,这个需求如何实现啊。
请问各位高手,这个需求如何实现啊。
解决方案 »
- editor.js问题 ie6下正常 ie7 ie8 google上点击工具栏就自动把文本域关闭起来
- 怎么在ASP JavaScript中调用函数,并使用textbox里的值
- jquery给控件添加的事件函数,有IDE能自动定位到吗?
- 如何得到指定时间的不同时区时间?
- js更改下拉框选定的默认值
- 判断table单元格中的一个复选框是否被选中,用来改变复选框所在tr的底色。。。。
- 判断文本框
- if(document.all)....,这个判断中document.all如何理解?
- 求正则,JS截取字符串
- IE下substr报错
- 如何显示输入框里输入的字数??
- asp中javacript控制菜单显示(在线等)
onchange事件触发后,统计:
完成百分比、正确率、平均速度等等
百分比=已打字数/原槁字数
正确率=已打正确字数/已打总字数
平均速度=已打字数/总时间
<html>
<head></head>
<body>
<div id="div1"></div>
<script type="text/javascript">
var oSee=document.getElementById("div1");
var letter='看一下吧,这就是效果,应该还不错呀';
var count=0;
function type()
{
if(count<=letter.length)
{
oSee.innerHTML=letter.substring(0,count);
count++;
}
else
{
window.clearInterval(IntervalID);
}
}
var IntervalID=window.setInterval(type,500);
</script>
</body>
</html>看一下,这就是效果!
我之前写的全文检索,效果很像练习打字的 。呵呵 你输入试试。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<script>
var over = false;
function aaa(obj){
var str = $("d").innerText;
var len = getLen(str);
var typeLater = obj.value;
var typeLaterLen = getLen(typeLater);
if(typeLaterLen>=len&&!over){
over = true;
$("d2").innerText = "100%";
obj.disabled=true;
}else if(typeLaterLen>=len){
$("d2").innerText = "100%";
}else{
$("d2").innerText = parseInt(typeLaterLen*100/len)+"%";
}
$("d1").innerText = compareStr(str,typeLater);
}
function $(id){
return document.getElementById(id);
}
//区分半角和全角
function getLen(str){
var count = 0;
for(var i=0;i<str.length;i++){
if(str.charCodeAt(i)>128){
count+=2;
}else{
count++;
}
}
return count;
}
//比较2个字符串的匹配情况
function compareStr(str1,str2){
var len = Math.min(getLen(str1),getLen(str2));
var success = 0;//成功字数
var fail = 0;//失败字数
var i = 0;
var j = 0;
var newstr1="";
var newstr2="";
while(success+fail<len){
if(getLen(newstr1)==getLen(newstr2)){
var strChar1=str1.charAt(i++);
var strChar2=str2.charAt(j++);
newstr1+=strChar1;
newstr2+=strChar2;
if(strChar1==strChar2){
success+=getLen(strChar1);
}else{
fail+=getLen(strChar1);
}
}else if(getLen(newstr1)>getLen(newstr2)){
var strChar2=str2.charAt(j++);
newstr2+=strChar2;
}else{
var strChar1=str1.charAt(i++);
newstr1+=strChar1;
fail+=getLen(strChar1);
}
}
if(len==0){
return "0%";
}else{
return parseInt(success*100/len)+"%";
}
}
</script>
</head><body>
<div id="d">这里是原稿,是练习打字用的!^_^</div>
<textarea rows=10 cols=40 onpropertychange="aaa(this)"></textarea><br>
正确率:<div id=d1></div>
完成率:<div id=d2></div>
</body></html>
function check2(value){
if(value!="") {
var divCT=document.getElementById("divCT");
//想把原来有可能出错的内容的hmtl标记使用正则表达式过滤掉然后再比较
var tempCT=divCT.innerHTML.replace(/<[^>]*>|<\/[^.]*>/gi,"");
var Index=value.length<tempCT.length?value.length:tempCT.length;
var result="";
for(var i=0;i<Index;i++) {
if(tempCT.charAt(i)==value.charAt(i))result+=tempCT.charAt(i);//连接正确的
else result+="<font color='red'>"+tempCT.charAt(i)+"</font>";//加上出错的格式化信息
}
if(Index<tempCT.length) result+=tempCT.substring(Index);
divCT.innerHTML=result;//设置结果
}
}
</script>
<h1>打字练习</h1>
<div id='divCT'>你好吗?我很好啊,谢谢你噶!</div>
<input type="text" id="txt3" style="width:300px" onkeyup="check2(this.value)"/>
这里是打字测试用的,please write this,谢谢!
这里打字测试用的,please write this,谢谢!
匹配3个字:"这里","谢谢"的第一个谢字
正确率:6/42=14%稍微改了一下,应该更直观
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<script>
var str = "";
window.onload=function (){
str = $("d").innerText;
};
var over = false;
function aaa(obj){
var len = getLen(str);
var typeLater = obj.value;
var typeLaterLen = getLen(typeLater);
if(typeLaterLen>=len&&!over){
over = true;
$("d2").innerText = "100%";
obj.disabled=true;
}else if(typeLaterLen>=len){
$("d2").innerText = "100%";
}else{
$("d2").innerText = parseInt(typeLaterLen*100/len)+"%";
}
$("d1").innerText = compareStr(str,typeLater);
}
function $(id){
return document.getElementById(id);
}
//区分半角和全角
function getLen(str1){
var count = 0;
for(var i=0;i<str1.length;i++){
if(str1.charCodeAt(i)>128){
count+=2;
}else{
count++;
}
}
return count;
}
//比较2个字符串的匹配情况
function compareStr(str1,str2){
var len = Math.min(getLen(str1),getLen(str2));
var success = 0;//成功字数
var fail = 0;//失败字数
var i = 0;
var j = 0;
var newstr1="";
var newstr2="";
var resultStr = "";
while(success+fail<len){
if(getLen(newstr1)==getLen(newstr2)){
var strChar1=str1.charAt(i++);
var strChar2=str2.charAt(j++);
newstr1+=strChar1;
newstr2+=strChar2;
if(strChar1==strChar2){
success+=getLen(strChar1);
resultStr+="<font color=blue>"+strChar1+"</font>";
}else{
fail+=getLen(strChar1);
resultStr+="<font color=red>"+strChar1+"</font>";
}
}else if(getLen(newstr1)>getLen(newstr2)){
var strChar2=str2.charAt(j++);
newstr2+=strChar2;
}else{
var strChar1=str1.charAt(i++);
newstr1+=strChar1;
fail+=getLen(strChar1);
resultStr+="<font color=red>"+strChar1+"</font>";
}
}
$("d").innerHTML = resultStr+str.substring(i);
if(len==0){
return "0%";
}else{
return parseInt(success*100/len)+"%";
}
}
</script>
</head><body>
<div id="d">这里是打字测试用的,please write this,谢谢!</div>
<textarea rows=10 cols=40 onpropertychange="aaa(this)"></textarea><br>
正确率:<div id=d1></div>
完成率:<div id=d2></div>
</body></html>