英语单词句子排序练习demo - javascript / ht
2018-12-21 本文已影响0人
爽儿_Rita
啰嗦两句
准备在这个博客中，不定时的更新一些自己学习编程中尝试过的好玩儿的练习，有用的demo，觉得不错的笔记及想法。
最近发现学习英语的app上，很多都有给出几个英语单词，然后要求给正确排序的练习题。觉得挺好玩，就想自己先用web实现一下。接触编程一年多，纯属练习。如果你有更好的方法，欢迎指点~
HTML部分
由于是demo，就没有花太多心思在美化上。用到的只有html的基础功能，如添加 id / onclick / style 等。wordSort.html 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>word sort</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
#content > div {
height: 30px;
}
</style>
</head>
<body>
<div id="options">
<button onclick="retry()">다시 풀기</button>
</div>
<div id="content">
<div>Question:
<div id="question"></div>
</div>
<br>
<div>Hints:
<div id="words"></div>
</div>
<br>
<div>Your Answer:
<div id="user"></div>
</div>
<button id="cancel" onclick="delete()" style="display: none">취소</button>
<br>
<div>Rigth Answer:
<div id="sentence"></div>
</div>
</div>
<script type="text/javascript" src="/wordSort/wordSort.js"></script>
</body>
</html>
Javascript 部分
可以直接放到HTML的<script></script>中。wordSort.js代码如下：
var question = 'Welcome to macdonals, how can i help you?';
var native = 'Emm.. big mac burger, please.';
var wordsRow;
var words = [];
var dup = [];
var indexSort = [];
var select = [];
var user = "";
wordsRow = native.split(/[ ]/);
for (var i = 0; i < wordsRow.length; i++) {
if (wordsRow[i].length !== 0) {
words[i] = wordsRow[i].trim() + " ";
}
}
$("#question").text(question);
creatButtons();
function creatButtons() {
var buttonList = "";
for (var i = 0; i < words.length;) {
var randomIndex = Math.floor(Math.random() * words.length);
if (dup.indexOf(randomIndex) === -1) {
dup.push(randomIndex);
indexSort.push(i);
buttonList += "<button id='button" + i + "' value='" + words[randomIndex] + "' onclick='createSentence(this.value, this)'>";
buttonList += words[randomIndex] + "</button> ";
i++;
}
}
$("#words").html(buttonList);
}
function createSentence(value, obj) {
if (obj.parentNode.children.length <= words.length) {
$('#cancel').css("display", "");
}
select.push(value);
user = user + value;
$("#user").html(user);
if (obj.parentNode.children.length === 1) {
setTimeout(function () {
if ((user).trim() === native) {
$('#cancel').css("display", "none");
$("#sentence").text(native);
alert('You are right!');
} else {
$('#cancel').css("display", "none");
$("#sentence").text(native);
alert('You are wrong!');
}
}, 100)
}
obj.parentNode.removeChild(obj);
}
function retry() {
dup = [];
indexSort = [];
creatButtons();
user = "";
$("#user").html(user);
$("#sentence").text("");
}
function delete() {
user = user.split(select[select.length - 1])[0];
$("#user").html(user);
var index = Number(words.indexOf(select[select.length - 1]));
for (var i = 0; i < dup.length; i++) {
if (dup[i] === index) {
if (indexSort[i] - 1 >= 0) {
var reforeNode = $("#button" + (indexSort[i] - 1));
for (var j = 1; j <= indexSort[i];) {
if (reforeNode.length === 1) {
var buttonList = "";
buttonList += "<button id='button" + indexSort[i] + "' value='" + words[dup[i]] + "' onclick='createSentence(this.value, this)'>";
buttonList += words[dup[i]] + "</button> ";
reforeNode.after(buttonList);
break;
} else if (j === indexSort[i]) {
var buttonList = "";
buttonList += "<button id='button" + indexSort[i] + "' value='" + words[dup[i]] + "' onclick='createSentence(this.value, this)'>";
buttonList += words[dup[i]] + "</button> ";
$("#words").prepend(buttonList);
break;
} else {
j++;
reforeNode = $("#button" + (indexSort[i] - j));
}
}
} else {
var buttonList = "";
buttonList += "<button id='button" + indexSort[i] + "' value='" + words[dup[i]] + "' onclick='createSentence(this.value, this)'>";
buttonList += words[dup[i]] + "</button> ";
$("#words").prepend(buttonList);
}
}
}
select.splice(select.length - 1, 1);
if (select.length === 0) {
$('#cancel').css("display", "none");
}
}
如果没有把此部分内容放到<script></script>中的话，<script type="text/javascript" src="/wordSort/wordSort.js"></script>中的src需要敲自己项目中的wordSort.js的路径。
