结对作业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的操作,是一个高层的框架,可以避免直接 ...

随机推荐

SQL SERVER 2008 下载地址&安装方法
下载地址:http://sqlserver.dlservice.microsoft.com/dl/download/B/8/0/B808AF59-7619-4A71-A447-F597DE74AC44 ...
java 将一个ip地址分割成一个数组
这个问题以前真还没注意,好像记得分割过规律的字符串,但是不是像IP这样是以"."为分割规律字符,而是的. 今天用到又用到个,代码写好了也没测试,直接上传服务器,但是就是会报错,之后 ...
TX2(1)--Jetson TX2 刷机并安装JetPack3.0
一般而言,刷机是在Ubuntu16.04的系统上进行,本人在ubuntu16.04系统上进行了初步的测试,暂时存在一些问题,因此建议首先配备一台Ubuntu14.04的host主机(不建议使用虚拟机) ...
Oracle SQL优化[转]
Oracle SQL优化 1. 选用适合的ORACLE优化器 ORACLE的优化器共有3种: a. RULE (基于规则) b. COST (基于成本) c. CHOOSE (选择性) 设置缺省的优化 ...
selenium 相关api操作
driver.close(); //关闭程序 driver.findElement(By.id("idExpression")); //查找单个页面元素 driver.findEl ...
Silverlight——施工计划日报表（二）
近来一直在加班,基本上没有个人时间.所以更新不会很即时. 长话短说,先从界面代码开始吧.界面代码很简单,如下所示: <UserControl xmlns:sdk="http://sch ...
StringBulider简单用法
StringBuild的是个动态对象,可直接拼加上字符串:而string对象的步骤:先初始化对象并赋值了,而后在拼加字符串时,先要创建需要拼加的字符串,然后再拼加,所以这就是StirngBuild远比 ...
《DSOD:Learning Deeply Supervised Object Detectors from Scratch》翻译
原文地址:https://arxiv.org/pdf/1708.01241 DSOD:从零开始学习深度有监督的目标检测器 Abstract摘要: 我们提出了深入的监督对象检测器(DSOD),一个框架, ...
meta标签的name和http-equiv属性
META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间,它提供用户不可见的信息.META标签有两个重要的属性:H ...
使用angular4搭建博客（一）
本文长期更新,未经运行,严禁转载. 博客(制作中) http://101.200.58.228/ Github https://github.com/Teloi/TEIndex 框架选择 Angula ...

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

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

随机推荐

热门专题