master 1.0.0
ZiYi 4 years ago
parent b596d07d1c
commit feac019d23

@ -0,0 +1,117 @@
*{
margin: 0;
padding: 0;
}
html,body{
margin: 0px;
padding: 0;
width: 100%;
height: 90%;
overflow: hidden;
background: #c2ccd0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/*火狐*/
input[type="number"] {
-moz-appearance: textfield;
}
h1{
margin: 10px;
padding: 5px;
width: 50%;
position: relative;
left: 25%;
box-shadow: 4px 4px 5px #888888;
}
ul{
width: 60%;
position: relative;
left: 20%;
text-align: right;
border: 1px solid #bbcdc5;
box-shadow: 4px 4px 5px #888888;
}
li{
margin: 5px;
padding: 10px;
width: 80%;
list-style: none;
}
.notice{
display: inline-block;
text-align: center;
padding: 1px;
margin: 1px;
height: auto;
display: none;
width: 30px;
}
.hfc{
display: block;
margin: 10px;
padding: 10px;
height: 25%;
text-align: center;
font-size: large;
font-weight: bold;
background: #e0eee8;
}
.display{
height: 90%;
margin: 10px;
padding: 10px;
position: relative;
text-align: center;
border-bottom: 1px solid #bbcdc5;
font-size: large;
font-weight: bold;
text-align: center;
background: #e0eee8;
}
.result{
outline: none;
border-top: none;
border-bottom: 1px solid black;
border-left: none;
border-right: none;
text-align: center;
font-size: large;
font-weight: bold;
background: #e0eee8;
}
.btnn,.btnn2{
width: 100px;
height: 50px;
font-size: large;
font-weight: bold;
background: #f3f9f1;
outline: none;
border: #c2ccd0;
box-shadow: 4px 4px 5px #888888;
}
#time{
display: inline-block;
width: 100px;
height: 25px;
text-align: center;
border: #c2ccd0;
box-shadow: 4px 4px 5px #888888;
}
#info{
float: left;
margin: 5px;
padding: auto;
width: 15%;
height: 50px;
border: 1px solid red;
border: #c2ccd0;
box-shadow: 4px 4px 5px #888888;
text-align: center;
}
#module{width: auto;
text-align: center;
font-size: medium;
}

@ -0,0 +1,25 @@
//计时器
var intDiff = parseInt(15);//倒计时总秒数量
function timer(intDiff) {
window.setInterval(function () {
var minute = 0,
second = 0;//时间默认值
if (intDiff > 0) {
minute = Math.floor(intDiff / 60);
second = Math.floor(intDiff) - (minute * 60);
}
if (minute <= 9) minute = '0' + minute;
if (second <= 9) second = '0' + second;
$('#minute').html('<s></s>' + minute + '分');
$('#second').html('<s></s>' + second + '秒');
intDiff++;
if (intDiff >= 20) {
clearInterval(timer); //定时器清除;
history.back(-1);
}
}, 1000);
}
$(function () {
timer(intDiff);
});

@ -1,64 +1,238 @@
$(document).ready(function () {
var results = Array();
$("#demo").click(function (e) {
var ctime;
var flag_create = false;
var score = 0;
var usetime = 0;
var flag_input = false;
var language = 1;
var module = 0;
var lanconfig = {
"title": ['四则运算生成器', 'Four Operation Generators'],
"module": ['--请选择模式--', '--Module--'],
"create": ['生成题目', 'Generate'],
"exchange": ['English', '简体中文'],
"show": ["查看答案", "Answers"],
"check": ["提交答案", "Submit"],
"cleanall": ['清空题目', 'Clean All']
}
var btn = $("#time");
$("#module").change(function (e) {
e.preventDefault();
module = $(this).val();
console.log("module" + module);
});
$("#create").click(function (e) {
e.preventDefault();
//alert("hello world");
begin();
$("#show").hide();
if (module) {
if (parseFloat(btn.text()) == 0 || btn.text() == "") {
results = [];
score = 0;
usetime = 0;
begin();
} else {
return;
}
} else {
if (language != -1) {
alert("请先选择出题模式。");
} else {
alert("Please Choose Module First!");
}
}
console.log(results);
});
$("#exchange").change(function (e) {
e.preventDefault();
language = language * (-1);
var index = $(this).val();
$(".btnn").each(function () {
var _this = $(this);
_this.html(lanconfig[_this.data("name")][index]);
})
if (flag_input && language == 1) {
$("#info").text("用时:" + usetime + "s 得分:" + score);
$("#info").show();
} else if (flag_input && language == -1) {
$("#info").text("Use Time" + usetime + "s Score" + score);
$("#info").show();
} else {
$("#info").hide();
}
if (flag_input) {
check();
}
if (language == -1) {
$("#module_default").text("--Module--");
$("h1").text(lanconfig['title'][index]);
} else {
$("#module_default").text("--请选择模式--");
$("h1").text(lanconfig['title'][index]);
}
});
$("#check").click(function (e) {
e.preventDefault();
if (language != -1) {
if (confirm("确认提交?(提交后不可修改!!!)")) {
stopct();
flag_input = true;
check();
$("#show").show();
$(".result").attr("disabled", 'disabled');
$("#check").attr("disabled", 'disabled');
} else {
return;
}
} else {
if (confirm("Do you confirm submission?(Answers cannot be modified after submission!!!)")) {
stopct();
flag_input = true;
check();
$("#show").show();
$(".result").attr("disabled", 'disabled');
$("#check").attr("disabled", 'disabled');
} else {
return;
}
}
});
$("#show").click(function (e) {
console.log("click");
e.preventDefault();
var inputs = $("input[class='result']");
var notice = $("span[class='notice']");
for (let i = 0; i < results.length; i++) {
if (notice.eq(i).data('right') == '0') {
inputs.eq(i).attr("type", "text");
inputs.eq(i).val(results[i]);
inputs.eq(i).css('color', 'red');
}
}
$(".notice").hide();
stopct();
$("#check").attr("disabled", 'disabled');
$(".result").attr("disabled", 'disabled');
});
$("#stop").click(function (e) {
e.preventDefault();
console.log(ctime);
stopct();
});
$("#cleanall").click(function (e) {
e.preventDefault();
if (flag_create) {
$("#ul").slideToggle("slow");
$("#ul").find("li").remove();
resetct();
$("#info").hide();
$("#check").hide();
flag_create = false;
$("#cleanall").hide();
$("#show").hide();
} else {
resetct();
$("#info").hide();
$("#check").hide();
flag_create = false;
$("#cleanall").hide();
$("#show").hide();
}
});
function begin() {
let tmp;
$.ajax({
type: "get",
url: "/begin",
data: "begin=1",
data: "begin=" + module,
success: function (res) {
switch (res.option) {
case "+":
tmp = res.number_1 + res.number_2;
$("#ul").append("<li>" + res.number_1 + " + " + res.number_2 + " = " + "<input class='result'>" + "</li><span class='notice'></span>");
break;
case "-":
tmp = res.number_1 - res.number_2;
$("#ul").append("<li>" + res.number_1 + " - " + res.number_2 + " = " + "<input class='result'>" + "</li><span class='notice'></span>");
break;
case "/":
tmp = res.number_1 / res.number_2;
$("#ul").append("<li>" + res.number_1 + " / " + res.number_2 + " = " + "<input class='result'>" + "</li><span class='notice'></span>");
break;
case "*":
tmp = res.number_1 * res.number_2;
$("#ul").append("<li>" + res.number_1 + " * " + res.number_2 + " = " + "<input class='result'>" + "</li><span class='notice'></span>");
break;
let counts = Object.keys(res).length;
default:
break;
for (let i = 0; i < counts; i++) {
$("#ul").append("<li><span class='detials'>" + res[i].formula + " = " + "</span><input class='result' type='number'>" + "<span class='notice'></span></li>");
results.push(res[i].result);
}
results.push(tmp);
$("#ul").slideToggle("slow");
$("#cleanall").show();
count_time();
flag_create = true;
$("#check").removeAttr("disabled", 'disabled');
$("#check").show();
}
}).fail(function () {
begin();
});
}
$("#check").click(function (e) {
e.preventDefault();
console.log("get");
function count_time(time) {
if (time != undefined) {
var len = time;
} else {
var len = 300;
}
btn = $("#time");
btn.text(len + 's');
ctime = setInterval(function () {
usetime = 300 - (parseFloat(btn.text()) - 1);
btn.text(parseFloat(btn.text()) - 1 + 's');
if (parseFloat(btn.text()) == 0) {
stopct();
check();
}
}, 1000);
}
function check() {
var inputs = $("input[class='result']");
var notices = $("span[class='notice']");
for (let i = 0; i < results.length; i++) {
if (inputs.eq(i).val() == results[i]) {
notices.eq(i).text("right");
if (flag_input) {
for (let i = 0; i < results.length; i++) {
console.log(inputs.eq(i).val());
if (inputs.eq(i).val() != "" && Number(inputs.eq(i).val()) == Number(results[i])) {
if (language != -1) {
notices.eq(i).text("结果正确!");
} else {
notices.eq(i).text("Correct!");
}
notices.eq(i).attr("data-right", "1");
notices.eq(i).css('color', 'green');
notices.eq(i).show();
score++;
} else {
if (language != -1) {
notices.eq(i).text("结果错误!");
} else {
notices.eq(i).text("Wrong!!");
}
notices.eq(i).attr("data-right", "0");
notices.eq(i).css('color', 'red');
notices.eq(i).show();
}
}
if (language == 1) {
$("#info").text("用时:" + usetime + "s 得分:" + score);
$("#info").show();
} else {
notices.eq(i).text("wrong");
$("#info").text("Use Time" + usetime + "s Score" + score);
$("#info").show();
}
} else {
if (language == 1) {
$("#info").text("用时:" + usetime + "s 得分0");
$("#info").show();
} else {
$("#info").text("Use Time" + usetime + "s Score0");
$("#info").show();
}
}
});
$("#show").click(function (e) {
console.log("click");
e.preventDefault();
var inputs = $("input[class='result']");
for (let i = 0; i < results.length; i++) {
inputs.eq(i).val(results[i]);
}
});
}
function stopct() {
clearInterval(ctime);
}
function resetct() {
stopct();
btn.text("0s");
}
});

@ -8,17 +8,33 @@
<title>四则运算生成器</title>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/js/index.js"></script>
<link rel="stylesheet" href="/static/css/index.css">
</head>
<body>
<button id="demo">生成题目</button>
<button id="check">检查答案</button>
<button id="show">查看答案</button>
<div class="hfc">
<h1 data-name="title">四则运算生成器</h1>
<select id="module" class="btnn2">
<option value="0" data-name="module" id="module_default">--请选择模式--</option>
<option value="20">20</option>
<option value="100">100</option>
</select>
<button id="create" class="btnn" data-name="create">生成题目</button>
<button id="cleanall" class="btnn" data-name="cleanall" style="display: none;">清空题目</button>
<select id="exchange" class="btnn2">
<option value="0">简体中文</option>
<option value="1">English</option>
</select>
<span id="time">0s</span>
<button id="check" class="btnn" data-name="check" style="display: none;">提交答案</button>
<button id="show" class="btnn" data-name="show" style="display: none;">查看答案</button>
</div>
<div class="display">
<ul id="ul">
<span id="info" style="display: none;"></span>
<ul id="ul" style="display: none">
</ul>
</div>
<input type="text">
</div>
</body>
</html>
Loading…
Cancel
Save