This week the team continued to work on their individual tasks which can be referred to in the Implementation Plan section of the progress report. I had worked on creating multiple questions (and therefore dynamically changing sections of the webpage) and a scoring system.
In order to create multiple questions without having to leave the html page, I had used some AngularJS to make the web page more dynamic and switch to different questions. To do this I had created multiple div elements (each containing information for the question) and used the ‘ng-show’ directive of AngularJS to allow that particular element to be displayed only if a certain condition is met - in this case, it would depend on the question number:
questions.html with added dynamic functionality using Angular
When retrieving the images from Trove, it makes a url get request multiple times to pull multiple images. These images then get appended to the output div element in each question:
Using multiple get requests to pull multiple images
Currently this is not very dynamic - it is pulling a predefined set of images all at once which then get displayed in each individual question. In order for this to be improved it should dynamically pull an image from Trove based on the information of the current question, rather than at the beginning. The code is also quite redundant, and could be improved by making a call to the ‘getJSON’ function once at each question. These improvements are to be made in the coming week.
In terms of the scoring, at the moment it is able to add 1 to their score for each question guessed correctly, and then displayed at the end on the scores page:
Incrementing score for each correct answer
Displaying score
No comments:
Post a Comment