Links
Objectives
The exercise 2 aims to introduce programming thinking through the creation of a flash card supported by JavaScript.The pedagogical objective of the flash card is to help young esl students to review the vocabulary related to prepositions of place.
Design
The flash card has a basic design. In the upper part, there is an instruction to give the user an idea of what the content is going to be. In the middle, there is an image with no labels in it. In the lower part, there is a button that sets off the JavaScript code to see the hidden flash card that has labels in it. The design of the button was made with an online app: button generator.
Production
The production of this exercise required using different combinations of knowledge acquired during the exploration of HTML, CSS, SVG and JavaScript. First, it was necessary to study the information related to the course topics. To have a better understanding of JavaScript, I watched a course on YouTube that explains its basic concepts and applications. After that, there was an exploration of different websites done by colleagues. While working on writing the code for JavaScript, I really started to understand how variables are read by the system. Curiously, at this point there was an error that I could not understand as I had followed rigorously the steps suggested on Premiers pas avec JavaScript to create my flash card. To solve it, I asked ChatGPT if my code had any errors. The IA responded that even though placing the code at the end of html was correct, the navigator has not fully read the elements when the script code sets off. In this way, I added “DOMContentLoaded” to fix the problem, and it worked.
Self-assessment
This exercise was a real challenge as I had no experience with JavaScript or design. The creation of a SVG image with Inkscape was not difficult, however there are still elements that I need to interact with, to create even more complex images. I understood the general concepts of JavaScript and created an exercise that follows the requirements of the course, but I am aware that complexity of the cards could be improved. This situation was mainly due to a lack of time to work on the task.
Bibliography
- Premiers pas avec JavaScript Edutechwiki
- HTML y CSS Course from ZERO by Dalto.
- JavaScript desde cero by Dalto
- ChatGPT5 Chatbot app
- Flash cards by Cambridge
- Button generator by bestcssbuttongenerator.
Resources
For this exercise, I used photos from my own gallery, images from Cambridge English Learning and fonts from google. In addition, I used some tutorial videos referenced in the bibliography to have a better understanding of how to create the flash card.