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

随机推荐

C语言初探
1.C语言在屏幕上显示内容我们有两种方式从计算机获得信息:一是看屏幕上的文字.图片.视频等,二是听从喇叭发出来的声音. 让喇叭发出声音目前还比较麻烦,我们先来看看如何在屏幕上显示一些文字吧.例如 ...
jmeter - 关联之正则表达式提取器
如果有这样的情况:一个完整的操作流程,需要先完成某个操作,获得某个值或数据信息,然后才能进行下一步的操作(也就是常说的关联/将上一个请求的响应结果作为下一个请求的参数): 在jmeter中,可以利用正 ...
前端到后台ThinkPHP开发整站（2）
我这次使用的ThinkPHP版本是:3.2.3版本,还有会使用到一个弹出层插件,叫 layer,官网地址是:http://layer.layui.com/.废话不多说,进入撸码环节. 1.通用方法编写 ...
python学习===将py文件从打包成exe程序
1.进入要打包的py程序所在文件夹,例如hello.py程序要打包. 2.在同一目录下新建文件setup.py,内容如下: from distutils.core import setup impor ...
防火墙和iptables
本文目录: 6.1 为什么需要防火墙 6.2 数据传输流程 6.2.1 网络数据传输过程 6.2.2 本机数据路由决策 6.3 TCP三次握手.四次挥手以及syn攻击 6.3.1 三次握手建立tcp连 ...
远景面试算法题——FolderSize
描述文件被存储在磁盘上的时候,通常为cluster方式.每个cluster具有固定的大小,一个文件所消耗的空间量始终是cluster大小的整数倍.因此,如果cluster的大小为100字节,165字 ...
【学习笔记】深入理解超时调用(setTimeout)和间歇调用(setInterval)
超时调用(setTimeout):在指定的毫秒数后调用函数或计算表达式. setTimeout(func, 1000); // func执行的函数,1000毫秒间歇调用(setInterval):按 ...
一句话搞定-phpStudy安装yaf扩展
首先下载phpStudyX64位的,然后傻瓜式安装,安装完下载yaf,由于yaf扩展的网站在国外很难下载,需要FQ,所以我这里下载了yaf5.6nts.zip,解压后把php_yaf.dll这个文件粘 ...
鸟瞰spring
一.spring框架概述: Spring框架主要提供了Ioc容器.AOP.数据访问.Web开发.消息.测试等相关技术的支持. 1.Spring的模块 1)核心容器 Spring-Core:核心工具类, ...
Nuget安装nupkg文件
问题描述: VS出现故障不能使用Manage NuGet Package自动下载安装DLL 解决方案: 直接官网下载相关需要的DLL 在VS中使用console加载本地下载的包安装控制台code参考 ...

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

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

随机推荐

热门专题