第三周-四则运算项目进度更新-万世想-白红宇

第三周-四则运算项目进度更新-万世想

阅读量：4970 次

发布时间：2019-06-12

本文共 3675 字，大约阅读时间需要 12 分钟。

上篇博文中，我介绍了网站项目需要的IDE：Intellij，需要的后端框架：Spring，Spring MVC及Mybatis，前端框架：Boostrap及vue.js。并且实现了基础的自动生成小学生四则运算的java程序，搭建了基本的前台页面（至少不算太丑的页面）。

这次博文，我将介绍目前用到的技术点，项目进度成果，并制定下一步的开发进度及时间规划。

一、项目技术点

1. 难度级别的控制参数

项目中自动出题的Java程序具有6个生成题目的参数：

1. 参数mode为符号模式，0是加减、1是乘除、2是加减乘除；2. 参数hasFraction为控制分数个数；3. 参数numOfCharacter为符号数量；4. 参数minOfNumber为式子中出现的最小数值；5. 参数maxOfNumber为式子中出现的最大数值； 6. 参数hasBrackets为式子中出现的括号个数。

通过这6个参数，也就制定出了题目难度的层次关系。难度等级目前我没有开放，首先大体设置了3个难度等级：

简单模式：5个数字，200以内整数加减法，该级别为算术小童；

较难模式：7个数字，20以内加减乘除整数四则运算，该级别为算术神童；

困难模式：7个数字，20以内分数整数混合四则运算，该级别为算术天才。。。额。。。该级别做完的小学生，绝对牛得不行了。

俗话说得好，没图还说啥？请看下图对比三种模式：

当然，这样的困难度在后面需要设计成循序渐进递进式的，如果一上来就搞太难，小学生一反感，这个产品就失败了。

2. 包含数学符号的运算式如何显示？

2.1 介绍MathJax

首先，+—*/这样的东西显示在页面中，估计小学生是懵逼的，你这是啥啥啥？！

所以，有了众多的html公式渲染组件，由于之前我做过类似的事情，对比多主流的公式渲染组件，因此直接使用爆款MathJax。其中，它支持三种模式的公式排版，我最喜欢LaTEX风格的。谜一样的LaTEX公式字符圆润饱满，赏心悦目，这个组件，别说给小学生出题，就是出高考题，出微积分线性代数那也是不在话下。

来随意感受一下：

额。。。当然了，这只是开个玩笑，我们需要的只是+-*/以及分式和括号的美观表达。

2.2 安装及使用

使用MathJax当然是先安装，非常简单，如果你用的是Tex格式的公式排版，那么直接在HTML文件head里面加入CDN引入，并且做些必要的行内配置，参考如下：

1 2

是不是很简单？

举个例子：

加减和括号都还是+、-、()；

*号使用\times代替，/号使用\div代替；

分号使用\frac{x}{y}代替，x位置是分子，y位置是分母；

公式环境单独成行使用$$ $$包裹起来；

公式环境嵌在文字中使用$ $包裹起来。

因此，下图公式就可以这样表达： $$1 + 2 - (3 \times 4) \div 5 = \frac{3}{5}$$

3. Spring MVC

根据1中的6个参数，Spring MVC用于控制前台与后台的逻辑交互，关键代码如下：

1     @SuppressWarnings("static-access") 2     @RequestMapping(value="generate_easy") 3     public ModelAndView EasyMode(Model map){ 4         AutoFormula autoFormula = new AutoFormula(); 5         autoFormula.generate(0, 0, 4, 0, 200); 6         String formular = autoFormula.formular; 7 String result = autoFormula.result; 8 9 map.addAttribute("formular", formular); 10 map.addAttribute("result", result); 11 return new ModelAndView("learn"); 12  } 13 14 @SuppressWarnings("static-access") 15 @RequestMapping(value="generate_middle") 16 public ModelAndView MiddleMode(Model map){ 17 AutoFormula autoFormula = new AutoFormula(); 18 autoFormula.generate(2, 0, 6, 0, 20); 19 String formular = autoFormula.formular; 20 String result = autoFormula.result; 21 formular = formular.replace("*", " \\times "); 22 formular = formular.replace("/", " \\div "); 23 24 map.addAttribute("formular", formular); 25 map.addAttribute("result", result); 26 return new ModelAndView("middle"); 27  } 28 29 @SuppressWarnings("static-access") 30 @RequestMapping(value="generate_hard") 31 public ModelAndView HardMode(Model map){ 32 AutoFormula autoFormula = new AutoFormula(); 33 autoFormula.generate(2, 1, 6, 0, 20); 34 String mathTex = autoFormula.mathTex; 35 String result = autoFormula.result; 36 mathTex = mathTex.replace("*", " \\times "); 37 mathTex = mathTex.replace("/", " \\div "); 38 39 map.addAttribute("formular", mathTex); 40 map.addAttribute("result", result); 41 return new ModelAndView("hard"); 42 }

代码中包含了3种级别不同的生成公式的方法。@RequestMapping用于接收URL GET请求，经过处理后生成公式字符串及其结果同时返回到相应前台页面。

生成公式的代码的调用是简单的。new一个AutoFormula类，调用它的generate函数，同时赋予上述的参数即可生成公式及结果。由于页面前台使用的MathJax公式渲染组件，因此要对公式字符串里的/替换成\div，*替换成\time，再输出到前台即可直接通过MathJax渲染出结果。

截图如下：