Report STIC I - Exercise 3 : JavaScript DOM Programming

Written by Kenneth Rioja, on November 28 2021.

1. Links

2. Goals

Objectives can be seen in the Introduction section of this exercise 2.

A bit of context before going into the details : my personal goal for this exercise was to build something that could be useful for my girlfriend's classroom. She was planning to teach to her pupils quadrilaterals. From this idea, I thought about an educational tool where pupils could randomly see quadrilaterals, name them and be corrected in real-time.
Thus the goal was to code an online homework where 8P pupils (Swiss Romandie, Geneva) could practice their lesson.

3. Design

First are displayed 3 lines of instructions. This is meant to be short for young pupils to read it quickly. First line says from where does this homework roots, second line shows what to do, third line indicate how to succeed.
The begin button looks like a button where I added a change of shade when hovering the mouse pointer into it (e.g., affordance or perception of pressability on an onscreen button using graphical techniques, Gaver, 1991). Also, it is centered and big enough to be able to be clicked (Babich, 2018).
Then the screen splits in three parts : the first showing the figure, second shows an input="text", third shows a companion.

  1. The figure is big enough to be seen and discriminated
  2. The input="text" has a placeholder="écris ta réponse ici" to indicate the pupil what to write in this text box. It has been made big enough to be able to read the longest word "parallélogramme" without being cut. The "Vérifier" button is visible and close enough to the text box to indicate the user to send the answer.
  3. The companion ('virtual agent') has been designed to look like a pet (e.g., cat) and looks somewhat intrigued. It is meant to increase engagement as an interactive virtual agent (Yasavur, Lisetti & Rishe, 2014; Tran, Robert & Bremond, 2016; Jeong & Breazeal, 2017)

Indeed, once you enter a word and click the button to be corrected :

  • Either it is false, a feedback pops out "Ce n'est pas la bonne réponse, réessaye encore..." and the companion shows a bit of sadness. The user is asked to re-write the correct answer.
  • Either it is true, a feedback pops out "Woohoo ! Bravo ! Continue comme ça !" and the companion shows happiness. Plus the correct answer is now in green to emphasize the correct word. And a "->" button pops to indicate to go to the next figure.

Having this interactive agent reacting positively every time the user succeed can help enhancing the association between the word and the shape (Madan, Scott & Kensinger, 2019).
The online homeworks ends when the seven quadrilateral have been correctly identified leading to congratulations and an invitation to redo the homework if necessary.

4. Production

The seven quadrilaterals were done through InkScape in SVG format as well as the little companion (neutral, happy, sad).
HTML, CSS and JS codes root from previous work, STIC-I courses (MALTT) and help was found on websites (e.g., https://www.w3schools.com/), or forums (e.g., https://stackoverflow.com/).

5. Self-assessment

Clicking on a button after entering text is asking effort, to be even more useable I should have implemented a way to replace the clicking by tapping 'Enter'.
The companion is not that visible - especially when it changes it emotional state. Next improvement could be to make it wobble when the answer given is wrong or make it jumps when the user gives the right answer.
The overall presentation of the page is not that elaborated. Classic still, but could be improved also with newer fonts / background. I would be careful though not to add more distraction as this is an online homework for pupils.
Also in terms of feedback, the way I implemented it now is either TRUE or FALSE. Next steps would be to guide the pupil WHERE (e.g., a missing accent or dash) or WHAT (e.g., not the right word) the problem is.
Moreover when the user gets wrong, it is not really clear that you must try again, a wrong feedback is not that 'punchy'.
Finally, the congratulations does not give any feedback on HOW you performed during the whole exercise (how many errors > "try to do it again!", what kind of errors > "try not to forget the accents!", etc.).
I should have added pictures and figures here to illustrate the text.

6. References

Babich, N. (2019, June 5). 7 Basic Rules for Button Design. Medium. https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4
Gaver, W. W. (1991). Technology affordances. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 79–84. https://doi.org/10.1145/108844.108856
Jeong, S., & Breazeal, C. (2017). Toward Robotic Companions that Enhance Psychological Wellbeing with Smartphone Technology. Proceedings of the Companion of the 2017 ACM/IEEE International Conference on Human-Robot Interaction, 345–346. https://doi.org/10.1145/3029798.3034803
Madan, C. R., Scott, S. M. E., & Kensinger, E. A. (2019). Positive emotion enhances association-memory. Emotion, 19(4), 733–740. https://doi.org/10.1037/emo0000465
Phan Tran, M. K., Robert, P., & Bremond, F. (2016, June). A Virtual Agent for enhancing performance and engagement of older people with dementia in Serious Games. Workshop Artificial Compagnon-Affect-Interaction 2016. https://hal.archives-ouvertes.fr/hal-01369878
Yasavur, U., Lisetti, C., & Rishe, N. (2014). Let’s talk! Speaking virtual counselor offers you a brief intervention. Journal on Multimodal User Interfaces, 8(4), 381–398. https://doi.org/10.1007/s12193-014-0169-9

7. Resources

All online resources about the code are found in the codes (.html, .css, .js).

Thank you for your time to read and test my work !