结对作业1----基于flask框架的四则运算生成器

011、012结对作业

coding地址：https://coding.net/u/nikochan/p/2nd_SE/git

一、作业描述

由于上次作业我没有按时完成，而且庞伊凡同学编程能力超棒，所以我们这次基于她上次用的python，再添加HTML来完成此次作业。

思维导图：

二、功能实现

错题重做功能。
自动计时功能。能显示用户开始答题后的消耗时间。
多语言支持。
控制输入。通过正则表达式对输入题目数和答案的操作进行控制。只有数字才能被成功输入
难度分级。

三、程序设计

（一）程序结构

├── README.md

├── app.py

├── function.py

├── static

├── templates

│   ├── answer.html

│   ├── fault.html

│   ├── index-ct.html

│   ├── index-en.html

│   ├── index.html

│   └── test.html

（二）代码分析

1、计时器

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>显示停留时间</title>

</head>

<body>

<form name="form1" method="post" action="">

<input name="textarea" type="text" value=""> 

<script language="javascript">

var second=0;

var minute=0;

var hour=0;

window.setTimeout("interval();",1000);

function interval()

{

second++;

if(second==60)

{

second=0;minute+=1;

}

if(minute==60)

{

minute=0;hour+=1;

}

document.form1.textarea.value = hour+"时"+minute+"分"+second+"秒";

window.setTimeout("interval();",1000);

}

</script>

</form>

</body>

</html>

2、选择语言和难度

<html>

<title>欢迎来到小天才的世界|开启你的数学之门</title>

<body>

<p style="text-align:center">欢迎来到小天才的世界|开启你的数学之门</p>

<<<<<<< HEAD

<form  action="test/" method="POST" >

    <div align='right'>

    <select onchange="s_click(this)">

          <option value="CNS" selected="">简体中文</option>

          <option value="/index-CT/" >繁體中文</option>

          <option value="/index-EN/">English</option>

    </select>

    </div>

    <div align="center">

    <p>请输入难度：</p>

    <input type="checkbox" name="If_int" value=1>初级</input>

    <input type="checkbox" name="If_Fraction" value=1>中级</input>

    <input type="checkbox" name="If_complex_Fraction" value=1>高级</input><br><br>

    <p>键入题数:</p>

    <input type="text" name=quiz_num onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();" /></input>

    <input type="submit" name="submit" ></input></div>

     <script type="text/JavaScript">

        function s_click(obj) {

            var num = 0;

            for (var i = 0; i < obj.options.length; i++) {

                if (obj.options[i].selected == true) {

                    num++;

                }

            }

            if (num == 1) {

                var url = obj.options[obj.selectedIndex].value;

                window.open(url); //这里修改打开连接方式

            }

        }

    </script>

=======

<form  action="test/" method="POST">

    <p>Please the level you want to challenge：</p>

    <input type="checkbox" name="If_int" value=1>初级</input>

    <input type="checkbox" name="If_Fraction" value=1>中级</input>

    <input type="checkbox" name="If_complex_Fraction" value="=1">高级</input><br><br>

    <p>键入题数:</p>

    <input type="text" name=quiz_num></input>

    <input type="submit" name="submit"></input>

>>>>>>> 3fec2e9752b08724c10502481ae79a33d01085ad

</form>

</body>

</html>

3、进入出题界面

<html>

<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>欢迎来到小天才的世界|开启你的数学之门

</title>

</head>

<body>

<<<<<<< HEAD

<form  name="form1" action="/index/answer/" method="POST">

<table>

    {% for allist in allists %}

    <tr>

        <td><label>{{ allist['show'] }}=</label></td>

        <td><input name= answer type="text" placeholder="answer" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();" /></td></tr>

    {% endfor %}

</table>

<input name="time_spend" type="text" value="">

<script language="javascript">

var second=0;

var minute=0;

var hour=0;

window.setTimeout("interval();",1000);

function interval()

{

second++;

if(second==60)

{

second=0;minute+=1;

}

if(minute==60)

{

minute=0;hour+=1;

}

document.form1.time_spend.value = hour+":"+minute+":"+second;

window.setTimeout("interval();",1000);

}

</script>

</input>

<input type="submit" name="submit"></input>

</form>

=======

<form  action="/hello-world/answer" method="POST">

<table>

    {% for allist in allists %}

    <tr>

        <td><label>{{ allist['show'] }}</label></td>

        <td><input name= answer type="text" placeholder="answer" /></td></tr>

    {% endfor %}

</table>

<input type="submit" name="submit"></input>

</form>

>>>>>>> 3fec2e9752b08724c10502481ae79a33d01085ad

</body>

</html>

4、判断正误界面

<html>

<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>欢迎来到小天才的世界|开启你的数学之门

</title>

</head>

<body>

<<<<<<< HEAD

<form action='/index/fault/' method="POST">

=======

<form >

>>>>>>> 3fec2e9752b08724c10502481ae79a33d01085ad

    <table>

    <tr>

        <td>Tasks&nbsp;&nbsp;</td>

        <td>Your Answer&nbsp;&nbsp;</td>

        <td>Correcrtly Result&nbsp;&nbsp;</td>

        <td>Status</td>

<<<<<<< HEAD

        <div align="right" style="border:0px " >times:{{times}}</div>

    </tr>

    {% for allist in allists %}

    <tr>

        <td><label>{{ allist['show'] }}=&nbsp;&nbsp;</label></td>

=======

    </tr>

    {% for allist in allists %}

    <tr>

        <td><label>{{ allist['show'] }}&nbsp;&nbsp;</label></td>

>>>>>>> 3fec2e9752b08724c10502481ae79a33d01085ad

        <td style="align-content: center;"><label>{{ allist['ans'] }}&nbsp;&nbsp;</label></td>

        <td><label>{{ allist['result'] }}&nbsp;&nbsp;</label></td>

        {% if allist['correct']=='1' %}

        <td><label> Congratuation!You are right!</label></td>

        {% else %}

        <td><label>Sorry, You are wrong!</label>

        {% endif %}

    </tr>

    {% endfor %}

    </table>

<<<<<<< HEAD

    <input type="submit" name="submit" value="返回首页"></input>

    <input type="submit" name="submit" value="错题重做"></input>

=======

    <input type="submit" name="submit" value="return"></input>

>>>>>>> 3fec2e9752b08724c10502481ae79a33d01085ad

</form>

</body>

</html>

5、错题重做

<html>

<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>欢迎来到小天才的世界|开启你的数学之门

</title>

</head>

<body>

<form  name="form1" action="/index/answer/" method="POST">

<table>

    {% for faulist in faulists %}

    <tr>

        <td><label>{{ faulist['show'] }}=</label></td>

        <td><input name= answer type="text" placeholder="answer" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();" /></td></tr>

    {% endfor %}

</table>

<input name="time_spend" type="text" value="">

<script language="javascript">

var second=0;

var minute=0;

var hour=0;

window.setTimeout("interval();",1000);

function interval()

{

second++;

if(second==60)

{

second=0;minute+=1;

}

if(minute==60)

{

minute=0;hour+=1;

}

document.form1.time_spend.value = hour+":"+minute+":"+second;

window.setTimeout("interval();",1000);

}

</script>

</input>

<input type="submit" name="submit"></input>

</form>

</body>

</html>

四、结果展示

五、照片

六、小结

结对编程的方式很好，因为两个人的相互讨论从而使解决问题实现了最快的方式。比如在一些函数的实现上，卡壳了。和小伙伴讨论一番便能得出结论。
html语言对我来说是一门全新的语言，我从网上零基础开始看，进度慢学的也慢，虽然这是结对编程的作业，但是庞伊凡同学付出比我多的多，因为她不仅要完成自己的部分，还要教我，十分感谢！我还拿了她的Python的书来看，虽然也没看懂~
人要勇于挑战自己，通过写作业的方式去学习新的框架新的语言不失是一种很好的方式，虽然可能会花费一定的时间，不过还是很值得的！

结对作业1----基于flask框架的四则运算生成器的更多相关文章

2nd_SE-结对编程1-基于flask框架的四则运算生成器
0x00 Coding https://coding.net/u/nikochan/p/2nd_SE/git 0x01 写在前面因为在上一个作业中,是基于python完成的Command程序.那么再 ...
Python基于Flask框架配置依赖包信息的项目迁移部署小技巧
一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...
基于Flask框架搭建视频网站的学习日志（一）
------------恢复内容开始------------ 基于Flask框架搭建视频网站的学习日志(一)2020/02/01 一.Flask环境搭建创建虚拟环境初次搭建虚拟环境搭建完虚拟环境 ...
基于Flask框架搭建视频网站的学习日志（二）
基于Flask框架搭建视频网站的学习日志(二)2020/02/02 一.初始化所有的Flask程序都必须创建一个程序实例,程序实例是Flask类的对象 from flask import Flask ...
基于Flask框架搭建视频网站的学习日志（三）之原始web表单
基于Flask框架搭建视频网站的学习日志(三)1.原始Web 表单本节主要用于体验一下前端后端直接数据的交互,样例不是太完善,下一节会加入Flash处理,稍微完善一下页面 (备注:建议先阅读廖雪峰老 ...
SZhe_Scan碎遮：一款基于Flask框架的web漏洞扫描神器
SZhe_Scan碎遮:一款基于Flask框架的web漏洞扫描神器天幕如遮,唯我一刀可碎千里华盖,纵横四海而无阻,是谓碎遮 --取自<有匪> 写在前面这段时间很多时间都在忙着编写该项目 ...
基于Flask框架的Python web程序的开发实战 <一> 环境搭建
最近在看<Flask Web开发基于Python的Web应用开发实战>Miguel Grinberg著.安道译这本书,一步步跟着学习Flask框架的应用,这里做一下笔记电脑只安装一个P ...
结对作业：基于GUI实现四则运算
1)Coding.Net项目地址:https://git.coding.net/day_light/GUIszysLL.git 2)在开始实现程序之前,在下述PSP表格记录下你估计将在程序的各个模块的 ...
基于Flask框架搭建视频网站的学习日志（六）之数据库
使用Flask-SQLSlchemy管理数据库(1)--初步安装调试一.介绍: Flask-SQLSlchemy是一个Flask扩展,简化了Flask中对sql的操作,是一个高层的框架,可以避免直接 ...

随机推荐

再起航，我的学习笔记之JavaScript设计模式06(抽象工厂模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前两 ...
PL/SQL 编程（二）游标、存储过程、函数
游标--数据的缓存区游标:类似集合,可以让用户像操作数组一样操作查询出来的数据集,实质上,它提供了一种从集合性质的结果中提取单条记录的手段. 可以将游标形象的看成一个变动的光标,他实质上是一个指针, ...
MAC下的Intellij IDEA常用快捷键
MAC下的Intellij IDEA常用快捷键 alt+f7 : 查找在哪里使用相当于eclipse的ctrl+shift+G command+alt+f7 : 这个是查找选中的字符在工程中出现的地 ...
Ubuntu 14.04.4 下 scp 远程拷贝提示：Permission denied, please try again. 的解决办法
我在 s0 主机上远程拷贝 /etc/hosts 文件到 s1 主机上,出现下面的错误提示: qiao@s0:~$ scp /etc/hosts root@s2:/etc/root@s2's pass ...
ECC椭圆曲线详解(有具体实例)
前言 ECC英文全称"Ellipse Curve Cryptography" 与传统的基于大质数因子分解困难性的加密方法不同,ECC通过椭圆曲线方程式的性质产生密钥 ECC164位 ...
01-artDialog4.1.7常用整理
关闭弹出框的几种常见方法: 1,artDialog可以通过鼠标双击关闭对话框,esc关闭对话框等.为了在关闭对话框要执行某一方法,不能仅仅在弹框中的关闭按钮中写.这时提供了一个函数:close.无论在 ...
mysql @value := 用法
背景有这么一张表,记录名字和分数,现在需要按照成绩排名,存在并列名次的情况解决方法思路:按照score从大到小排序,第一行数据就是第一名,第二行就是第二名......需要判断当前行的score和 ...
【Ubuntu 16】深入Ubuntu文件系统
Ubuntu文件系统的设计目的就是把文件有序地组织在一起,提供一个从逻辑上组织文件的文件系统.除了文件的组织外,文件安全也是文件系统的设计要点,所以文件的访问权限是文件系统不可缺少的组成部分 Ubun ...
Java并发基础——Thread
并发编程可以使我们将程序划分为多个分离的,独立运行的任务.通过多线程机制,这些独立任务都将由执行线程来驱动.在使用线程时,CPU将轮流给每个任务分配占用时间,每个任务都觉得自己在占用CPU,但实际上C ...
7_linux下PHP、Apache、Mysql服务的安装
1.首先安装之前,要确保你的虚拟机能连上外网. Mysql: 1.yum -y install mysql 连接数据库命令行模式 2.yum install mysql-server 安装mys ...

结对作业1----基于flask框架的四则运算生成器

结对作业1----基于flask框架的四则运算生成器的更多相关文章

随机推荐

热门专题