1. Links
2. Goals
Objectives can be seen in the Introduction section of this exercise 6.
The idea came from maths homeworks for pupils in primary school (8P, Geneva). The homework consisted of completing the equation with the '=', '>' or '<' operators.
Originally the numbers are either decimal numbers (e.g., "0.12"), either written (e.g., "trois dixièmes"), either fractions (e.g., "6/2").
On a more technical side, the aim of this exercise was to be able to implement third-party codes in our work.
3. Design
The page displays a title, the instructions and the two decimal numbers to compare.
In between, we can see a drop-down list. When hovering over with the mouse, the mouse changes its shape and the drop-down list is shading. Clicking on it displays the three operators.
If you choose any operator, a violet feedback will be displayed. If the operator is the right one, a positive comment will be displayed inside the violet feedback, plus Noxxy will cheer you up. If the operator is wrong, a negative feedback will be displayed in the violet feedback.
4. Production
I first used W3.CSS to change the overall style of the page - which looks a bit more modern by the way compared to the previous works.
To do this, I added to each tag the corresponding classes (e.g., class="w3-panel")
Then I used Vue.js to display random decimal numbers up to 2 decimals plus did all the drop-down list and feedbacks through the same Framework.
My app.js has two components : data:{} where all the data is (numbers, operators, noxxy's path), computed: {} where I manipulate these data to be able to verify the equation (e.g., corr(){} function.
Noxxy and the bubble were make by me with InkScape.
5. Self-assessment
I know this work is really poor in general.
There is only one line displayed, thus demanding the user to refresh or click on Noxxy every time he/she succeeds, this may lead to fatigue and disengagement.
When having two similar numbers and choosing the equal operator, feedback is not displaying well.
When succeeding, we can re-click on the drop-down list, we should not.
As seen and told by the professor in the last work : Noxxy only has little job here which is disappointing - I could have make it a bit more helping with multiple lines for example.
W3.CSS was super simple to implement, this added a more modern view of the page, I wish to re-use it in my following works.
I wanted to explore Vue.js and I may got lost inside it.
I succeed to do the 'simple' things, but when it came to redo a second line, numbers were randomly displayed, but I did not find the way to refresh the drop-down list (it was sticked to the same chosen value, see 'myModel' variable).
I had big expectations since I wanted to implement numbers as characters linked to their value (e.g., value = 1, text = "un"), then to make this work for numerator and denominator to be able to merge the two and create the true number.
Also wanted to implement numbers displaying this way : " 1 : 25 ".
This was not a good time for me since playing with the operators in comparisons was hard to do. Also, learning how to manipulate Vue.js was new and I did not find great documentation about it (I often saw Vue v.2 documentation on forums).
It's a shame because I would love to have it done thoroughly - without Vue.js or with a help tailored on my needs.
6. References
None
7. Resources
This work is using W3.CSS Stylesheet : https://www.w3schools.com/w3css/
This work is using Vue.js Javascript Framework : https://vuejs.org/
Help to write the code was directly implemented in the .html, .js codes.