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

随机推荐

css中的几个小tip（二）
margin的塌陷现象 (一)在标准文档流中, 垂直方向存在margin的塌陷现象先上段代码: <style type="text/css"> .box{ width ...
HTML相关知识
1 Day01HTML HTML5声明:<!doctype html> <html> 1.1 HTML基本结构: <head> <title>题目< ...
关于dfs+剪枝第一篇：hdu1010
最近进入了dfs关于剪枝方面的学习,遇到的第一道题就是hdu的1010.一道很基础的剪枝..可我不幸地wa了很多次(待会再解释wa的原因吧QAQ),首先我们来看一下题目. Problem Descri ...
一个普通的 Zepto 源码分析（二） - ajax 模块
一个普通的 Zepto 源码分析(二) - ajax 模块普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块,以 ...
Hibernate（四）
Hibernate的二级缓存理解缓存定义: 缓存(Cache):计算机领域非常通用的概念.它介于应用程序和永久性数据存储源(如硬盘上的文件或者数据库)之间,其作用是降低应用程序直接读写永久性数据存储 ...
jsp基础与提高（EL、JSTL)
EL表达式 1.1 为什么需要EL表达式和JSP标签 JSP的产生在一定程度上将Servlet中负责表现的功能抽取了出来,但JSP页内嵌入的Java代码也破坏了页面中负责表现的页面结构,特别是当运算逻 ...
第2天：HTML常用标签
今天学完主要对所学知识点进行了整理. 一.超链接ahref:www.baidu.com(跳转页面):id名(锚点跳到相应div位置):01.rar(压缩包) target:_blank(新窗口打开): ...
自写JS分页工具【基于JQ】
好久没有来逛园子,也好久没有更新博客,就像沉睡已久的人忽然被叫醒,忽然就被园友的回复惊醒了.园友提出了关于我之前一篇文章的疑问--可那已经是半年以前的博客了,加上我一直觉得分享给大家的应该是我最新的思 ...
Spring（二）--FactoryBean、bean的后置处理器、数据库连接池、引用外部文件、使用注解配置bean等
实验1:配置通过静态工厂方法创建的bean [通过静态方法提供实例对象,工厂类本身不需要实例化!] 1.创建静态工厂类 public class StaticFactory { private st ...
迈向angularjs2系列(6):路由机制
目录1.angular-seed的路由2.路由机制的探索3.懒加载一:angular-seed的路由 step1:安装种子项目 $ git clone --depth 1 https://gi ...

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

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

随机推荐

热门专题