軟件工程基礎-結對項目

項目二：四則運算題目生成進度記錄：

6.18更新：學了一段時間MFC以後，把此四則運算轉換成了可視化圖形界面版本的自動生成程序，源程序已經上傳到Github上，下面是程序運行截圖;

整形數據

分數

　　主要是要調用MFC的一些接口和原本的程序代碼進行綁定，邏輯上和本來的網頁端差很少只是語法上有必定的差別。

　　下面是原博客內容：

---

 

• 5月8日：因爲上週有兩門考試須要準備，我和個人室友小夥伴傑寶寶都投身於緊張刺激的組原和數電的複習之中，暫時的擱置了一下結對項目。今天上午和小夥伴商量了一下項目課題選擇，結合咱們二人的優點最終選擇了第二個項目，花了半小時安排了一下項目進程，也把各自的分工進行了明確。結對項目正式開工。
• 5.27日：幾門大考結束以後已經要開始着手準備這個結對項目各類項目了。

　　以前準備是界面用HTML等搭建，而後執行c++編譯後的exe文件，進行數據間的傳遞，達到可視化的效果。這是對界面庫一無所知的小白最初的想法。可是事情遠遠沒有這麼簡單！

任務：將本來的四則運算（c++版本）拓展爲網頁版。

一、GitHub：https://github.com/1120161970/Calculate

二、時間耗費 :

PSP2.1	Personal Software Process Stages	預估耗時（min）	實際耗時（min）
Planning	計劃	30
Estimate	估計這個任務須要多少時間	1200
Development	開發	600
Analysis	需求分析（包括學習新技術）	120
Design Spec	生成設計文檔	30
Design Review	設計複審（和同事審覈設計文檔）	10
Coding Standard	代碼規範（爲目前的開發制定合適的規範）	10
Design	具體設計	30
Coding	具體編碼	120
Code Review	代碼複審	30
Test	測試（自我測試，修改代碼，提交修改）	120
Reporting	報告	30
Test Report	測試報告	10
Size Measurement	計算工做量	10
Postmortem & Process Improvement Plan	過後總結，並提出過程改進計劃	30
	合計

三、解題思路：

1. 首先花了一點時間去學習js，並作了一個簡單的計算器demo便與後續拓展
2. 在和室友交流的過程當中發現咱們最初的那個想法有問題，由於html直接與c++程序或者是exe程序是沒法直接交互的，這個時候查閱資料瞭解到了界面庫，UI庫之類的東西，可是迫於時間有限只能在後續再去嘗試這個全新的領域了。
3. 既然沒法直接交互，那我想的是就寫一個js版本的在線生成器，邏輯用js，而後前臺界面用html+bootstrap。
4. 後學考慮過升級成jsp+javabean版本。

四、設計實現過程

1. 最初的計算器版本實現很簡單，邏輯和頁面分離的思路。
2. 四則運算在線生成就相對要麻煩一點，可是仍是函數思想，給最初的button綁定一個play_all函數，用來生成題目和正確答案，這個函數會讀取最初的input輸入值來生成相應數量的題目。邏輯就再也不贅述，代碼中都有詳細的說明。

五、性能改進及思路

1. html的優點在於界面很好上手，也很容易寫一個很好看的界面，可是對於js和html界面的耦合性可能會很高，不利於代碼分離。
2. 我寫的這個版本是屬於網頁版本，小夥伴的那個版本是c++版本，因此後續的改進就兩個方向：一是用界面庫升級c++版本，而是用jsp和javabean進一步用前端的思路去優化。

六、代碼說明（思路解釋+註釋說明）

1. 　計算器demo

   var clearmsg = false;  
   var ispoint = true;  
   function show(obj){  
       var data =  obj.value;  
       var text = document.getElementById("text");  
       if(clearmsg){  
           text.value = "";  
           clearmsg=false;  
       }  
       if(data == "+" || data == "-" || data == "*" || data == "/"){  
           ispoint = true;  
       }  
       if(data == "0" && text.value == "0"){  
           text.value = parseInt(text.value) + 0;    
       }else if(text.value == "0" && data != "+" && data != "-" && data != "*" && data != "/"){  
           text.value = parseInt(text.value) + parseInt(data);  
       }else{  
           text.value += data;  
       }  
   }  
   //計算結果  
   function getResult(){  
       var data = document.getElementById("text");  
       try{  
           ispoint = true;  
           data.value = eval(data.value);  
           clearmsg = true;  
           //alert(ispoint);  
       }catch(err){  
           alert("這怎麼算!");  
           data.value = "0";  
       }  
   }  
   //點  
   function point(){  
       var p = document.getElementById(".");  
       var text = document.getElementById("text");  
         
       if(ispoint){  
           text.value += p.value;  
           ispoint = false;  
       }  
       //if(text.value.indexOf(".") == true ){  
       //}else{  
       //  text.value += p.value;  
       //}           
   }  
   //清空  
   function funclear(){  
       var a = document.getElementById("text").value = "0";  
       clearmsg = false;  
       ispoint = true;  
       //if(a==null || a==""){  
       //  alert("null");  
       //}else{  
       //  alert(a);  
       //}  
   }  
   //退格鍵  
   function funback(){  
       var text = document.getElementById("text");  
       if(text.value == "0" || text.value == ""){  
           text.value = "0";  
       }else{  
           document.getElementById("text").value=document.getElementById("text").value.slice(0,-1);  
       }  
   }  

　　上面是運用js寫的運算邏輯，而後最後的界面是這樣的：

　　　　

　　能夠完成基本的四則運算，可是對於浮點數的表示就簡單採起的四捨五入式。

　　2.　改進後的四則運算生成的JavaScript代碼：

　　　　

function GetRandomNum(Min,Max){   
  var Range = Max - Min;   
  var Rand = Math.random();   
  return(Min + Math.round(Rand * Range));   
}  
// 獲取隨機數  
function max_num(x,y) {  
 var t;  
 while (y) {  
  t = x%y;  
  x = y;  
  y = t;  
 }  
 return x;  
}  
function fenshu(a,b,p) {  
 if (p==1) {  
  if (a>b) {  
   return a+"/"+b;  
  }else if(a<b){  
   return a+"/"+b;  
  }else {  
   return 1;  
  }  
 }else {  
  var x=a/p;  
  var y=b/p;  
  if(y==1){  
   return x;  
  }else{  
   return x+"/"+y;  
  }  
 }  
}  
function f_count(a,b,c,d) {  
  var Arr = ["+","-","*","/"];   
  var n = GetRandomNum(0,3);  
  switch(Arr[n]){  
   case "+":{  
   var sum_x=(a*d)+(b*c);  
   var sum_y=b*d;  
   max_x=max_num(sum_x,sum_y);  
   max_y=max_num(sum_x,sum_y);  
   var N=fenshu(sum_x,sum_y,max_x);  
   return a+"/"+b+"+"+c+"/"+d+"="+N;  
   break;  
   }  
   case "-":{  
   var sum_x=(a*d)-(b*c);  
    while (sum_x<0) {  
     var a = GetRandomNum(1,30);   
     var b = GetRandomNum(1,30);  
     var c = GetRandomNum(1,30);   
     var d = GetRandomNum(1,30);  
     var sum_x=(a*d)-(b*c);  
    }  
   var sum_y=b*d;  
   max_x=max_num(sum_x,sum_y);  
   max_y=max_num(sum_x,sum_y);  
   var N=fenshu(sum_x,sum_y,max_x);  
   return a+"/"+b+"-"+c+"/"+d+"="+N;  
   break;  
   }  
   case "*":{  
   var sum_x=a*c;  
   var sum_y=b*d;  
   max_x=max_num(sum_x,sum_y);  
   max_y=max_num(sum_x,sum_y);  
   var N=fenshu(sum_x,sum_y,max_x);  
   return a+"/"+b+"*"+c+"/"+d+"="+N;  
   break;  
   }  
   case "/":{  
   var sum_x=a*d;  
   var sum_y=b*c;  
   max_x=max_num(sum_x,sum_y);  
   max_y=max_num(sum_x,sum_y);  
   var N=fenshu(sum_x,sum_y,max_x);  
   return a+"/"+b+"÷"+c+"/"+d+"="+N;  
   break;  
   }  
  }  
}  
function count(a,b){  
  var Arr = ["+","-","*","/"];   
  var n = GetRandomNum(0,3);  
  switch(Arr[n]){  
   case "+":{  
   var sum=a+b;  
   return a+"+"+b+"="+sum;  
   break;  
   }  
   case "-":{  
   var sum=a-b;  
   while(sum<0){  
    var a = GetRandomNum(1,30);  
    var b = GetRandomNum(1,30);  
    var sum=a-b;  
   }  
   return a+"-"+b+"="+sum;  
   break;  
   }  
   case "*":{  
   var sum=a*b;  
   return a+"*"+b+"="+sum;  
   break;  
   }  
   case "/":{  
   var sum=a/b;  
   while(a%b!==0){  
    var max_x=max_num(a,b);  
    var N=fenshu(a,b,max_x);  
    return a+"÷"+b+"="+N;  
   }  
   return a+"÷"+b+"="+sum;  
   break;  
   }  
  }  
}  
function pl_f() {  
 var son_a = GetRandomNum(1,30);   
 var par_b = GetRandomNum(1,30);  
 var son_c = GetRandomNum(1,30);   
 var par_d = GetRandomNum(1,30);  
 var suma=f_count(son_a,par_b,son_c,par_d);  
 return suma;  
}  
function pl() {  
  var a = GetRandomNum(1,30);   
  var b = GetRandomNum(1,30);  
  var sumb=count(a,b);  
  return sumb;  
}  
  
function play_all() {  
  // var flag = 0;  
  var a = document.getElementById("tp").value;  
  var inta = parseInt(a);  
  for (i = 1; i <= inta; i++) {  
   var a = GetRandomNum(0,1);  
   document.getElementById("text").innerHTML+=("<br>"+"第"+i+"題：");  
   switch (a) {  
    case 0:  
     var A=pl();  
     var strs = A.split("=");  
     document.getElementById("text").innerHTML+=(strs[0]+"="+"<input>"+"<button>提交</button>"+"<br>");  
     document.getElementById("text2").innerHTML+=("<br>"+"第"+i+"題答案："+"<span>"+strs[1]+"</span>"+"<br>");  
     break;  
    case 1:  
     var B=pl_f();  
     var strs = B.split("=");  
     document.getElementById("text").innerHTML+=(strs[0]+"="+"<input>"+"<button>提交</button>"+"<br>");  
     document.getElementById("text2").innerHTML+=("<br>"+"第"+i+"題答案："+"<span>"+strs[1]+"</sapn>"+"<br>");  
     break;  
   }  
  }  
}  

　　前臺界面就用bootstrap框架簡單搭建了一個，最終的界面是這樣的：

　　

　　　　測試了最大的數目前是2000，超過這個的話瀏覽器容易崩潰，多是js不大適合直接拿來作邏輯運算吧。仍是有待提高。會在後續進一步更新

七、實際耗時

PSP2.1	Personal Software Process Stages	預估耗時（min）	實際耗時（min）
Planning	計劃	30	25
Estimate	估計這個任務須要多少時間	1200	1400
Development	開發	600	700
Analysis	需求分析（包括學習新技術）	120	120
Design Spec	生成設計文檔	30	20
Design Review	設計複審（和同事審覈設計文檔）	10	15
Coding Standard	代碼規範（爲目前的開發制定合適的規範）	10	20
Design	具體設計	30	40
Coding	具體編碼	120	200
Code Review	代碼複審	30	20
Test	測試（自我測試，修改代碼，提交修改）	120	60
Reporting	報告	30	30
Test Report	測試報告	10	10
Size Measurement	計算工做量	10	10
Postmortem & Process Improvement Plan	過後總結，並提出過程改進計劃	30	30
	合計	1200	1300（目前）