合作编程

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量90 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/esby/p/7710566.html
版权

结对编程1-模块化

合作成员：
兰天宇（201421122091）代码仓库点击此处
郭文茜（201421122005）代码仓库点击此处

需求分析

  • 选择语言功能
  • 在生成题目后开始计时，并在提交题目后停止计时并统计正误数量

程序设计

选择语言

1212395-20171022163054006-534242102.jpg

计时器

1212395-20171022163101646-190616196.jpg

代码说明

HTML代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Mathematics</title>
        <style type="text/css">
            #sub {
                display: block;
            }
        </style>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    </head>

    <body>
        <div class="container">
            <div class="form-group">
                <label for="">Number of question</label>
                <input class="form-control" type="number" id="ex_n" name="ex_n" />
            </div>
            <div class="form-group">
                <label for="">Range of value</label>
                <input class="form-control" type="number" id="ex_r" name="ex_r" />
            </div>
            <button id="confirm" class="btn btn-primary" type="button" onclick="subHandle()">Confirm</button>
            <div id="right_num">Correct number：<span>0</span></div>
            <div id="wrong_num">Wrong number：<span>0</span></div>
            <div id="timer">Time：00:00:00</div>
            <table id="exer" class="table table-striped">
                <tr>
                    <th>Question</th>
                    <th>Answer</th>
                    <th>Correct/Wrong</th>
                </tr>
            </table>
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">
            //js代码详见下方
        </script>
    </body>

</html>

JS代码

  • 计时器对象
var timer = {
    //时分秒属性
    sec: '0' + 0,
    min: '0' + 0,
    hou: '0' + 0,
    //开始计时方法
    startTimer: function() {
        var timeShow = document.getElementById('timer');
        this.sec = '0' + 0, this.min = '0' + 0, this.hou = '0' + 0;
        this.sec = '0' + 1;
        //定义全局定时触发器
        setTimer = setInterval(function() {
            timeShow.innerText = 'Time：' + this.hou + ':' + this.min + ':' + this.sec;

            this.sec++;
            //时分秒换算
            if(this.sec == 60) {
                this.sec = '0' + 0;
                this.min++;
            }
            if(this.min == 60) {
                this.min = '0' + 0;
                this.hou++;
            }
            this.hou < 10 && this.hou.toString().length < 2 ? this.hou = '0' + this.hou : this.hou = this.hou;
            this.min < 10 && this.min.toString().length < 2 ? this.min = '0' + this.min : this.min = this.min;
            this.sec < 10 && this.sec.toString().length < 2 ? this.sec = '0' + this.sec : this.sec = this.sec;
        }.bind(this), 1000);
    },
    //停止计时方法
    stopTimer: function() {
        clearInterval(setTimer);
    }

}
  • 生成题目方法
function subHandle() {

    document.querySelector('#exer').innerHTML = '<tr><th>Question</th><th>Answer</th><th>Correct/Wrong</th></tr>';
    //保存题目数
    var n = document.querySelector('#ex_n').value;
    //保存范围数
    var r = document.querySelector('#ex_r').value;
    //存放四则运算符
    var ope = ['+', '-', '/', '*'];
    //判断用户输入信息是否符合要求
    if(parseInt(n) == n && parseInt(r) == r && n <= 10000 && r > 0 && n > 0) {
        document.getElementById('confirm').style.display = 'none';
        var current_n = 0;
        while(current_n < n) {
            //随机生成运算符数量1~3
            var ope_count = Math.round(Math.random() * 2) + 1;
            //根据运算符数量随机某生成括号的位置
            var bra_position = Math.round(Math.random() * ope_count);
            //存放算式的数
            var number = [];
            //根据运算符数量生成相应数量的数字并存入数组中
            for(var i = 0; i < ope_count + 1; i++) {
                number.push(Math.ceil(Math.random() * r))
            }
            //根据运算符数量不同，生成算式，或者带括号的算式
            if(ope_count == 1) {
                var equ = number.shift() + ope[Math.round(Math.random() * 3)] + number.shift();
            } else if(ope_count == 2) {
                switch(bra_position) {
                    case 0:
                        var equ = number.shift() + ope[Math.round(Math.random() * 3)] + number.shift() + ope[Math.round(Math.random() * 3)] + number.shift();
                        break;
                    case 1:
                        var equ = '(' + number.shift() + ope[Math.round(Math.random() * 3)] + number.shift() + ')' + ope[Math.round(Math.random() * 3)] + number.shift();
                        break;
                    case 2:
                        var equ = number.shift() + ope[Math.round(Math.random() * 3)] + '(' + number.shift() + ope[Math.round(Math.random() * 3)] + number.shift() + ')';
                        break
                }

            } else if(ope_count == 3) {
                switch(bra_position) {
                    case 0:
                        var equ = number.shift() + ope[Math.round(Math.random() * 3)] + number.shift() + ope[Math.round(Math.random() * 3)] + number.shift() + ope[Math.round(Math.random() * 3)] + number.shift();
                        break;
                    case 1:
                        var equ = '(' + number.shift() + ope[Math.round(Math.random() * 3)] + number.shift() + ')' + ope[Math.round(Math.random() * 3)] + number.shift() + ope[Math.round(Math.random() * 3)] + number.shift();
                        break;
                    case 2:
                        var equ = number.shift() + ope[Math.round(Math.random() * 3)] + '(' + number.shift() + ope[Math.round(Math.random() * 3)] + number.shift() + ')' + ope[Math.round(Math.random() * 3)] + number.shift();
                        break;
                    case 3:
                        var equ = number.shift() + ope[Math.round(Math.random() * 3)] + number.shift() + ope[Math.round(Math.random() * 3)] + '(' + number.shift() + ope[Math.round(Math.random() * 3)] + number.shift() + ')';
                        break;
                }

            }
            //将算式以及输入框等拼接插入标签中
            var strHtml = '<tr class="exercise"><td>Question-' + (current_n + 1) + '.&nbsp;<label>' + equ + '</label>=</td><td><input class="form-control" style="width:100px" type="text"/></td><td><span class="res right" style="color:green; display:none;">Correct</span><span class="res wrong" style="color:red; display:none;">Wrong</span></td></tr>'
            document.querySelector('#exer').innerHTML += strHtml;
            current_n++;
        }
        document.querySelector('#exer').innerHTML += '<button id="sub" class="btn btn-success" type="button" onclick="checkHandle()">Submit</button>';
        timer.startTimer();
    } else {
        alert('Please enter the question number and range of value correctly, the number of questions must be less than 10000, the range of value must be a natural number');
    }
}
  • 提交答案函数
function checkHandle() {
    document.getElementById('confirm').style.display = 'inline-block';
    timer.stopTimer();
    var exer = document.getElementsByClassName('exercise');
    for(i in exer) {
        if((typeof exer[i]) == 'object') {
            //获取答题框内容
            var ans = exer[i].getElementsByTagName('input')[0].value;
            if(ans.indexOf('\'') != -1 && ans.indexOf('/') != -1) {
                var arr = ans.split('\'');
                var result = parseInt(arr[0]) + eval(arr[1]);
                if(result == eval(exer[i].getElementsByTagName('label')[0].innerText)) {
                    rightFun(exer[i]);
                } else {
                    wrongFun(exer[i]);
                }

            } else if(ans.indexOf('/') != -1) {
                if(eval(ans) == eval(exer[i].getElementsByTagName('label')[0].innerText)) {
                    rightFun(exer[i]);
                } else {
                    wrongFun(exer[i]);
                }
            } else {
                if(ans == eval(exer[i].getElementsByTagName('label')[0].innerText)) {
                    rightFun(exer[i]);
                } else {
                    wrongFun(exer[i]);
                }
            }
        }
    }
    $('#right_num span').text($('span.right:visible').length);
    $('#wrong_num span').text($('span.wrong:visible').length);
}
  • 正误行为函数
//正确行为函数
function rightFun(ele) {
    ele.getElementsByClassName('right')[0].style.display = 'inline';
    ele.getElementsByClassName('wrong')[0].style.display = 'none';
    ele.style.borderColor = 'green';
}
//错误行为函数
function wrongFun(ele) {
    ele.getElementsByClassName('right')[0].style.display = 'none';
    ele.getElementsByClassName('wrong')[0].style.display = 'inline';
    ele.style.borderColor = 'red';
}

运行测试

  • 选择语言
    1212395-20171022163113349-527171333.jpg
    1212395-20171022163119709-868722184.jpg

  • 生成题目
    1212395-20171022163127177-715918332.jpg

  • 提交答案
    1212395-20171022163133927-1822076596.jpg

小结感受

先说结论：合作编程的效率是1+1<2。无论两个人在事前有着多么深入的讨论、规约，两个人的默契程度是不可能比得上单独一个人的，而且随着人数增多，这个效率会越来越低，比如1+1=1.9，那么1+1+1=2.8。人和人之间是必然存在分歧的，正所谓求同存异。所以我认为合作编程的意义在于1+1>1以及更多的想法，更多的可能性，只要比一个人做的时候效率高就好了。

伙伴评价

编程功底不是很强，但是在查阅资料和指导下还是写出了计时器的功能，不得不说很有学习天分。在要考研的严峻条件下还是能挤出事件完成这次的编程，真的很感人。

PSP

PSP2.1Personal Software Process StagesTime Senior Student(min)Time(min)
Planning计划55
Estimate估计这个任务需要多少时间11
Development开发180240
Analysis需求分析 (包括学习新技术)11
Design Spec生成设计文档21
Design Review设计复审52
Coding Standard代码规范11
Design具体设计1015
Coding具体编码120150
Code Review代码复审53
Test测试（自我测试，修改代码，提交修改）3060
Reporting报告3035
测试报告2025
计算工作量55
并提出过程改进计划55

转载于:https://www.cnblogs.com/esby/p/7710566.html

???111
关注
分布式编程
weixin_43653279的博客
07-01 2051
分布式编程 今天我将就我个人的经验和网上的资料对分布式编程进行自己的描述。 分布式应用程序就是指应用程序分布在不同计算机上，通过网络来共同完成一项任务，通常为服务器/客户端模式。更广义上理解“分布”，不只是应用程序，还包括数据库等，分布在不同计算机，完成同一个任务。之所以要把一个应用程序分布在不同的计算机上，主要有两个目的： 分散服务器的压力 大型系统中，模块众多，并发量大，仅用一个服务器承载往...
商务合作HTML模板下载
11-24
商务合作HTML模板下载 商务 设计 网页 合作 人才 HTML 模板下载
Koding —— 编程协作平台
加菲猫的技术博客
12-21 745
https://koding.com/  官网
c语言多人合作编程,不懂嵌入式C的模块化编程 你还想跟别人合作项目？
weixin_29655399的博客
05-18 2290
原标题：不懂嵌入式C的模块化编程 你还想跟别人合作项目？当你在一个项目小组做一个相对较复杂的工程时，意味着你不再独自单干。你需要和你的小组成员分工合作，一起完成项目，这就要求小组成员各自负责一部分工程。比如你可能只是负责通讯或者显示这一块。这个时候，你就应该将自己的这一块程序写成一个模块，单独调试，留出接口供其它模块调用。最后，小组成员都将自己负责的模块写完并调试无误后，由项目组长进行组合调试。...
多人合作编程技巧之一
铁磨老妖的专栏
04-03 936
　　有一次，我们五个人编写一个系统，在这个系统中，出现了彼此互相调用他人模块的复杂情况， 你有什么好办法处理这种状况么？
编程比赛详解
热门推荐
Geek_的博客
01-31 1万+
编程比赛 无论是学生还是社会工作者，我们都会碰到许多形形色色的竞赛，有的比赛奖金丰盛，有的比赛可以为求职镀金，有的比赛只是为了兴趣爱好。那么，对于致力于it技术的小伙伴们而言，有哪些竞赛的获奖能让你的简历在众多简历中脱颖而出呢？ 下面我为大家整理出来一些含金量高、对求职比较有帮助的大赛，这些比赛通常都有大量的现金奖励和进入大型IT或者软件公司的就业机会，大家可以根据个人兴趣爱好和能力，选择一些适合...
少儿编程校企合作创新实验室三方协议
03-22
少儿编程校企合作创新实验室三方协议
少儿编程校企合作创新实验室三方协议.docx
12-17
该文档描述的是一个少儿编程校企合作创新实验室的三方合作协议，涉及的主体包括一所小学（XX小学）、一家编程教育企业（XX编程）和一个学术机构（XX学会）。协议的目的是响应国家对人工智能和编程教育的重视，通过...
少儿编程源码 scratch在线编程源码 python在线源码 少儿编程培训管理系统
07-26
专注于培训机构营销、平台之间的合作，支持网络多加公司，多人联网系统工作，更高效，更快捷。 七、权限分配和角色管理。灵活设置每一位成员的权限，角色不同分配管理层面。与各个角色无缝对接，获取海量用户，迅速...
趣味编程社团活动方案活动计划.pdf
04-07
趣味编程社团活动方案的核心是利用...总之，这个趣味编程社团活动方案旨在通过趣味性的编程活动，使学生在轻松愉快的环境中学习编程，培养他们的创新思维、团队合作能力和信息技术素养，为未来的技术学习打下坚实基础。
使用git进行团队协作编程
晨识草的博客
03-28 1820
一. 创建一个organization前提：已经有github帐号，没有的话直接百度搜索github官网进行注册接下来按照截图进行操作：点击右上角自己的头像，然后选择settings接着在左边一栏选择organizations选择new organization按照要求填写相关信息，比如组织的名称和邮箱即可创建完组织后，可以邀请其他成员加入，直接发送地址栏中的地址给要邀请的成员即可，被邀请的成员直...
协作和开发 工具
caoyangyang123的博客
04-26 261
协作开发 chrome 插件 json-handle 格式化json octotree 查看github代码 request maker 轻量级的postman,后端接口测试工具 Ｇoogle 搜索　测试感觉不可用 github stackoverfow 代码检测工具 codot 墙 searchCode https://searchcode.com/ androidXref ...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 863
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 508
【代码】【JavaScript】LeetCode：707设计链表。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 456
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 885
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1317
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
并行编程基础：合作与竞争交互
"这篇资料主要探讨了并行编程的基础，包括并行编程的现状、难点、环境以及编程方法。并行编程面临着软件开发落后于硬件发展的问题，由于缺乏合适的工具和成熟的模型，使得并行编程相对复杂。文章指出，顺序编程拥有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值