Harry Potter Quiz
February 2020 - March 2020
This project aimed to create a version of the Harry Potter Patronus quiz (which can be found here).
The questions and results are based on an analysis of the quiz from this reddit page.
The structure consists of a back-end API, created using ASP.NET, and a front-end interface, created using Angular. These will be explained in more detail below.
- Gained experience in full-stack web development
- Gained experience with Angular and Typescript in general, getting more used to a component-oriented design approach
- Gained experience with C# and the ASP.NET Web API framework
- Gained experience in data processing with R
Quiz Analysis
As part of an exploration of the R programming language and data analysis I decided to use hierarchical clustering on the data from the reddit analysis of the harry potter quiz to create a diagram showing the distribution of patronuses and similarities between them
Harry Potter API
The API was created using ASP.NET (.NET Framework 4.6.1). The data was stored in a local SQL database which was created using Entity Framework 6 with the code-first method. The data for the questions and results for which answers lead to which patronuses came from a spreadsheet provided in the reddit analysis linked above.
The data from the reddit analysis mentioned earlier was placed in a CSV file as part of the project data, giving a file linking patronuses to question results. A Patronus model was then created to store this data in a format that the C# code could understand. Entity Framework with a code-first method was used to store the CSV data in a local SQL database: this used a Seed function to populate the database with objects of the Patronus model class, with the data for each Patronus coming from the CSV file. During the Seed function, Puppeteer Sharp (a library that uses a headless version of Google Chrome to run Javascript on a page before retrieving the HTML) was used to scrape a Harry Potter Wiki Page to retrieve pictures for each of the Patronuses.
A Patronus controller was created that deals with requests to the api URL route; this allows the user to retrieve a list of patronuses by specifying a name (or part of a name), and also any answers to the seven question sets; the idea is the front-end quiz will complete, and ask the API to return the correct Patronus that comes from the user's results. Further to this, unlike in the original quiz, the ability was provided to ask for a list of all patronuses, along with a percentage signifying how similar that patronus was to the answers the user provided.
Harry Potter Front-End
The front-end was created using Angular (Version 8.2.14). The structure involves the front-end question page using a Quiz Service which stores an instance of the current quiz and allows the user to answer a question, move to the next question, and get results. The structure of the quiz is described in more detail below.
The quiz itself is made up of a number of classes, designed to split functionality into generic parts that can be modified easily. The classes used are as follows:
- QuestionOption: this class contains a value for a specific option (e.g it may just contain the value 'shine')
- Question: this class contains a list of question options (e.g question 1 may contain three options: 'shine', 'glitter', 'glow'). The class provides useful functions to store and return the answer chosen, with an optional parameter for a 'correct answer' if the quiz needs it (the harry potter quiz does not need this parameter as it is basically just a personality quiz and there is no correct answer).
- QuestionSet: this class contains a list of questions for a specific question set (the harry potter quiz consists of seven question sets, each with five or six questions). It provides useful functions to get the next question, answer a specific question, and return results of all the questions in the question set.
- Quiz: this class contains a list of all the question sets. It provides useful functions to get the next question (either in the current question set or in the next question set if the first has run out of questions), answer a question, check if the quiz is over, and to get the final results of the quiz.
The Quiz Service is essentially a wrapper around the Quiz class that stores an instance of the current quiz and provides functions to get the next question, answer a question, and get the results of the quiz. This Quiz Service is injected into all components of the webpage so all components access the same version of the quiz.
In the case of the harry potter quiz, the results in the Quiz class are retrieved by calling the API through the use of a HarryPotterAPI Service that was made to contact the API described earlier.
The goal when creating the structure of this front-end application was to make it as generic as possible in regards to quizzes, such that it would be easy to add a new quiz of a different type. To do this, the project made use of Angular's most powerful feature: components. A component in Angular is a collection of files relating to a specific visual element of the application that allows for more modularised content relating to funcionality of the application.
The following components were created:
- Question Page: this component is in charge of managing the quiz: it asks the Quiz Service for the next question, and provides it to the Question component below. The Question Component should then return an answer that this component will pass on to the Quiz Service. If the quiz has finished, this component will redirect the user to the Patronus Results component.
- Question: this component is in charge of displaying the current question and returns the value of the answer that is chosen.
- Patronus Results: this component is in charge of displaying the results of the quiz by interacting with the Quiz Service. Firstly, if the quiz is not finished yet, this will redirect the user back to the Question Page component. If the quiz has finished, this component will ask the Quiz Service for the results and then send them to the following two components. It also provides a restart button, and a change-display button that switches between the following two components.
- Patronus Information: this component is in charge of displaying the main result of the quiz, i.e the patronus that the user is most like.
- Patronus Percentage Display: this component is in charge of displaying the percentage similarity of the user to each patronus, complete with a useful navigation UI.