Module one — JavaScript Project
JavaScript project done! I am happy with how my project ended up, though I do think I could have added a few more features if I had understood a little more about how APIs worked.
As I have been working as an accounting teacher for several years, I wanted to make a revision app for students. I stuck close to the original idea, which was to have students click on one of six main transactions a business may have, this opens a YouTube video (which I created) to watch and review who is involved and what happens. Finally at the end the students click on a quiz button which takes them to a quiz on all the six transactions.
My original thought had been to have a separate quiz for each transaction, however thought it might be a little too time consuming for a quick revision exercise.
The first thing I needed to do was double check with Albert that my plan would work… after his reassurance I set to work making the YouTube videos. I had done similar things before to use in class, so I used Powtoon software to make the short 10 second videos on each of the six transactions.
Once the videos were done, I use Rapid-API t create the API which would bring the data from my YouTube account to my website in JSON format. From that point I was able (with some assistance) to create functions to filter the data based on the titles, and render the thumbnails into the page, and embed the video into the modal which would open when clicked.
As I wanted the questions to be on this specific topic, I chose to fetch the questions from a JSON file I created locally. From there it was reasonably straight-forward to get that data and run the quiz. I had done a tutorial with James Quick on Udemy (link here) which runs through how to do this in JavaScript and through an API. I needed to make some changes as the questions were coming from a separate JSON file, thankfully that was simple enough after having studied fetch() in JavaScript. As we were limited to one HTML page I also rendered the final score in the modal, rather than a separate page. The final score and CSS design was dependent on the score achieved by the student, if the student got less than 50%, the background picture was of “Practice makes perfect”, as opposed to those who got above 50% who got fireworks.
Things I would alter/improve in the future would be, making the design look a little more professional (CSS is still not my strong point), and trying to make it a little more interactive and gamified. Quizzes are useful to assess understanding, but are not particularly engaging for students.
The link to the project, hosted on GitHub can be found here.
