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

随机推荐

.NET Exceptionless 日志收集框架本地环境搭建
一.简介 Exceptionless 是一个开源的实时的日志收集框架,它可以应用在基于 ASP.NET,ASP.NET Core,Web Api,Web Forms,WPF,Console,MVC 等 ...
DoNet 高效开发必备开发工具
工欲善其事,必先利其器,没有好的工具,怎么能高效的开发出高质量的代码呢? 本文为 ASP.NET 开发者介绍一些高效实用的工具,包括 SQL 管理,VS插件,内存管理,诊断工具等,涉及开发过程的各个环 ...
Windows常用功能
删除文件或目录CMD命令: rd/s/q 盘符:\某个文件夹 (强制删除文件文件夹和文件夹内所有文件)del/f/s/q 盘符:\文件名 (强制删除文件,文件名必须加文件后缀名)
Oracle基础--体系
1. 连接到Oralce At the operating system prompt, enter the following command to start the SQLCommand Lin ...
python 第二天
list,tuple,dict,set list,tuple,dict,set 是今天学习的四种 Python 内置类型 list list 即数组,有序的集合,可以使用索引的方式来访问 list 的 ...
Netty笔记——技术点汇总
目录 · Linux网络IO模型 · 文件描述符 · 阻塞IO模型 · 非阻塞IO模型 · IO复用模型 · 信号驱动IO模型 · 异步IO模型 · BIO编程 · 伪异步IO编程 · NIO编程 · ...
python 符合Python风格的对象
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 25.0px Helvetica } 对象表示形式每门面向对象的语言至少都有一种获取对象的字符串表示形式的 ...
数字图像处理界标准图像 Lena 后面的故事
熟悉图像处理或者压缩的工程师.研究人员和学生,经常在他们的实验或者项目任务里使用"Lenna"或者"Lena"的图像.Lenna 图像已经成为被广泛使用的测试图 ...
"R6002 floating point support not loaded"问题分析
今天为了追踪程序线程退出耗时时间,添加了耗时时间输出日志: TimerMeter tm; // do some threads exit logic float fSecs = tm.Elapsed( ...
Java6和Java8在Windows上共存
0x00 需求最近在做一个Android的项目,一开始安装的是Java8用于项目的开发.但是在项目后期需要用到drozer用于检测项目的安全性,要搭建drozer的测试环境必须要使用Java6,否则 ...

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

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

随机推荐

热门专题