From feac019d23307080aee9fdba41b58313f57c4146 Mon Sep 17 00:00:00 2001 From: ZiYi <1756318241@qq.com> Date: Mon, 6 Sep 2021 22:40:30 +0800 Subject: [PATCH] fix bugs --- static/css/index.css | 117 ++++++++++++++++++++ static/js/demo.js | 25 +++++ static/js/index.js | 258 ++++++++++++++++++++++++++++++++++++------- templates/index.html | 26 ++++- 4 files changed, 379 insertions(+), 47 deletions(-) create mode 100644 static/css/index.css create mode 100644 static/js/demo.js diff --git a/static/css/index.css b/static/css/index.css new file mode 100644 index 0000000..7e3773f --- /dev/null +++ b/static/css/index.css @@ -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; +} \ No newline at end of file diff --git a/static/js/demo.js b/static/js/demo.js new file mode 100644 index 0000000..1aa9652 --- /dev/null +++ b/static/js/demo.js @@ -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('' + minute + '分'); + $('#second').html('' + second + '秒'); + intDiff++; + if (intDiff >= 20) { + clearInterval(timer); //定时器清除； + history.back(-1); + } + }, 1000); + +} +$(function () { + timer(intDiff); +}); diff --git a/static/js/index.js b/static/js/index.js index 6e93f17..794d19d 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -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("
  • " + res.number_1 + " + " + res.number_2 + " = " + "" + "
    • "); - break; - case "-": - tmp = res.number_1 - res.number_2; - $("#ul").append("
  • " + res.number_1 + " - " + res.number_2 + " = " + "" + "
    • "); - break; - case "/": - tmp = res.number_1 / res.number_2; - $("#ul").append("
  • " + res.number_1 + " / " + res.number_2 + " = " + "" + "
    • "); - break; - case "*": - tmp = res.number_1 * res.number_2; - $("#ul").append("
  • " + res.number_1 + " * " + res.number_2 + " = " + "" + "
    • "); - break; + let counts = Object.keys(res).length; - default: - break; + for (let i = 0; i < counts; i++) { + $("#ul").append("
  • " + res[i].formula + " = " + "" + "
    • "); + 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 Score：0"); + $("#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"); + } }); diff --git a/templates/index.html b/templates/index.html index 01bd07a..f06a174 100644 --- a/templates/index.html +++ b/templates/index.html @@ -8,17 +8,33 @@ 四则运算生成器 + - - - +
    +

    四则运算生成器

    + + + + + 0s + + +
    -
    - + \ No newline at end of file