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('<s></s>' + minute + '分');
+        $('#second').html('<s></s>' + 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("<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 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 @@
     <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>
\ No newline at end of file