And you can also use this link
For our Week 8 Front End project we have decided to create a quiz app website designed for quiz hosts. Using our app you can create and design personalised quizes that will take the user input on the desired category, number of questions, difficuty settings and automatically generate questions and answers. We have also included a link to a scoreboard that the host can use to keep track of each team's score.
We have met everyday and devided the tasks between us. We have used Trello and GitHub Projects to keep track of what everyone is doing. All screenshots and ideas were saved and recorded in a shared Google drive.
We also has stand-ups every morning where we would outline the plan for the day and any issues that we had during the previous day.
After our initial project planning meeting each of us did an inital research on the options available for the project which included:
- Look at other similar websites
- Think about new ideas for that category
- What APIs are available
Result, together with a pros and cons list were recorded in this shared google drive where we have recorded all our planning and research for the project.
Analysing the research and resources available we have decided to create a quiz app.
The goal was to create a quiz app that will help the quiz host write personalised quizes based on user input.
- the quiz host/master.
- event organisers
- work gatherings/ team building quiz host
- too much time spent to manually create and write quiz questions
- not personalised to the user
- information overload
- nothing available on the market that will provide questions+answers on each category based on user input
We have used this survey to gather more information. We have used the responses and applied this in the design and functionality of our app.
The main problem to solve was the time spent on gathering the info. The solution will be the fetched questions and answers from the API data.
- building a functional quiz app
- have information gathered from API data
- have information changed depending on user input
- A quiz with videos, gifs, images, sounds
- Multiple Categories ✅
- Online community
- Option to save the quiz to reuse it
- Leader Board
- Difficulty Settings ✅
- Different themes like hen do, work, birthdays
- Ability to create your own quiz ✅
- Ability to generate a pre made quiz with option to change questions
- Accessibility - Log in on phone or website with a code
- UX UI Design ✅
- User Feedback and Change the design ✅
- Option to present Quiz by zoom
- Navigation Bar ✅
- Website that writes a quiz for the host ✅
- API will fetch questions from the input ✅
- All questions displayed on the same page for quiz host to read ✅
- User can pick a selection of categories - Check Box ✅
- Multiple APIs used ✅
- landing page ✅
- Use API to change difficulty of the questions based on user input ✅
- Refresh button for each question
- Multiple Choice on Answers ✅
- Refactor HTML to add information with JS ✅
- Joke connected to the category ✅
- name chosen - QuizLeap
- color palette chosen
- logo chosen - frog theme
We researched the look of other websited to see what is out there and get inpired for our design. You can see some of the result here.
We have used Figma to design the wireframe which also gives a demo on how the website is supposed to look like.
- User Input
- Questions generated from API
- Multiple API - Joke, Giphy generator
Research on the API data can be found here. Every API was tsted using POSTMAN and the browser.
We have split the tasks using this spreadsheet. We have also used Git issues and Git projects to track what everyone was doing.
We have used Open Trivia API as it was the only one that gave us the option to change categories and difficulty levels and number of questions based on the user input. It was also the API with the widest category selection.
We have used GET requests to grab our data from the API. We practice our favourite async await function to enter the request-response cycle dance. The REST API gave us the response formatted as JSON (JavaScript Object Notation). The data comes in pairs of keys and values that are colon-separated. We have used object dot notation to grab the data from the API and display that to the user.
Because this will be used for entertainment for our additional APIs we have used Giphy generator and this random joke generator that will definitely put a smile on everyone's face.
Button that linked to the category page was not displaying the information when clicked. We discovered that was becasue we were trying to call the async function on multiple pages.
- reduced the number of page to 2 : landing-page and input-page
- main.js is called only on the input-page
- Dificulty options and options to choose number of questions was added to the same page
After completeing our basic version of the quiz app we have designed this survey to show this to the users and see what improvements we can add to our app.
- confusion about the scoreboard button
- change background of correct answer to green
- description not very clear
- more categories added ✅
- added navbar ✅
- created page to display Giphy ✅
- created oage to display joke ✅
- back to top button added ✅
- background-color for correct answer changed to green ✅
- added extra info about the app ✅
- user research on new features, design and name
- add true or false option
- make frogs animated
- make a picture round
- make a music/sound round
- option to display questions over zoom
- option to add theme like Birthday Hen do
It was a long journey but we had loads of fun doing this. We all worked together to solve the problem for the user and create a fully functional version. We learned a lot from each other while practicing everything that we have learned until now!!