Create simple QUIZ GAME (need this ready in 24 hours)
Budget: $30 – $250 USD
I need to create a QUIZ MUSIC GAME (HTML game) that it gets its configuration information from a CSV files.
Everything must be responsive and I need this ready in 24 hours
For this there will be a file call quizzes.csv inside it will be all the available quizzes (you can see it here https://bit.ly/4bZsBOg ) each quiz will have a name, a slug, a concept and a id of a spotify playlist. The name is the Quiz title and the slug it is its shortname use to get the quiz images and its answers file. If the slug is XX then the its images will be XX1.jpg and XX2.jpg and the its answers file will be XX.csv
1) In the first screen you will see all the available quizzes, you can see the design here
https://bit.ly/4aHxPNy (each photo is a different quiz). The user will clic on a quiz and enter the quiz page
2) You can see the design of the quiz page here https://bit.ly/4bZ283y
In the quiz page will appear the quiz photo (XX1.jpg) and 15 answers (the answers to the quizzes are songs). The songs order must be random and change its order every time the page loads. The answers have to be load from the quiz css file. On that file (you can see one here https://bit.ly/3R8dJp0) you will find a list of 15 answers. The first column is the song name, the second column is the song artist, the third column is the song spotify id and the forth column is if it is correct (it has a C) or incorrect (I).
As you can see in the design https://bit.ly/4bZ283y it shows the songs name, under the name in a smaller text the song artist. In the left to the song name appears a play button and on the right a check button. If the user clics on the play button on the bottom of the page must appear a bar with a spotify music player with that song (in the CSV file you have the song id to do this). You can see how the player will have to appear here https://bit.ly/3Kki58H. This bar must be sticky on the botton of the page and opens the player using an iframe as explain here https://spoti.fi/3WWUtyg you can test this here https://bit.ly/44ZTRdp . If the user clics on another play button on the same bottom sticky bar iframe will load the other song spotify player, so if he want can hear the song.
The user will be able to select 5 songs (on the left to the continue buttom will have to appear a counter showing how many songs the user selected and how many are left (Ej.3/5) after this the user will clic the “continue” buttom.
3) After the user clics on the “continue” buttom, if he didn´t select the 5 correct answers, a pop up will appear saying how many corrects answers he had selected (you can see it here https://bit.ly/3V0jXrV) and a OK buttom. When the user clics on the buttom, the pop up will close and the results will appear to the songs he had selected, if the song was correct it will appear in green if it was incorrect it will appears in red (you can see it here https://bit.ly/4bG5dpw ) but the answer that he didn´t select previously will be enable so he can have a second chance to select the correct ones. He will be able to select as many answers as incorrect selections he had done previously (if he had selected 3 incorrect answers, now he will be able to select 3 answers). After this he will clic on the “continue” buttom.
4) After this will appear on the bottom of the page the photo 2 (XX2.jpg) the concept that is load from quizzes.csv, 2 buttoms and under the 3 buttoms a spotify playlist player thar will show the quiz play list (the id of the playlist is specify in quizzes.csv file).
Of the 3 buttoms, the first buttom is Play again (will load the same quiz again), Play another quiz (will load the index page with all the quizzes) and the last one is a link to playlist.html page (just put a simple link, I will create that page later).
I need this ready in 24 hours
I will provide access to my Wordpress, FTP I need that you work on my server.
I will send you the AI files of the desing, I need it exactly as the design.
My max budget por this is $100
Everything must be responsive and I need this ready in 24 hours
For this there will be a file call quizzes.csv inside it will be all the available quizzes (you can see it here https://bit.ly/4bZsBOg ) each quiz will have a name, a slug, a concept and a id of a spotify playlist. The name is the Quiz title and the slug it is its shortname use to get the quiz images and its answers file. If the slug is XX then the its images will be XX1.jpg and XX2.jpg and the its answers file will be XX.csv
1) In the first screen you will see all the available quizzes, you can see the design here
https://bit.ly/4aHxPNy (each photo is a different quiz). The user will clic on a quiz and enter the quiz page
2) You can see the design of the quiz page here https://bit.ly/4bZ283y
In the quiz page will appear the quiz photo (XX1.jpg) and 15 answers (the answers to the quizzes are songs). The songs order must be random and change its order every time the page loads. The answers have to be load from the quiz css file. On that file (you can see one here https://bit.ly/3R8dJp0) you will find a list of 15 answers. The first column is the song name, the second column is the song artist, the third column is the song spotify id and the forth column is if it is correct (it has a C) or incorrect (I).
As you can see in the design https://bit.ly/4bZ283y it shows the songs name, under the name in a smaller text the song artist. In the left to the song name appears a play button and on the right a check button. If the user clics on the play button on the bottom of the page must appear a bar with a spotify music player with that song (in the CSV file you have the song id to do this). You can see how the player will have to appear here https://bit.ly/3Kki58H. This bar must be sticky on the botton of the page and opens the player using an iframe as explain here https://spoti.fi/3WWUtyg you can test this here https://bit.ly/44ZTRdp . If the user clics on another play button on the same bottom sticky bar iframe will load the other song spotify player, so if he want can hear the song.
The user will be able to select 5 songs (on the left to the continue buttom will have to appear a counter showing how many songs the user selected and how many are left (Ej.3/5) after this the user will clic the “continue” buttom.
3) After the user clics on the “continue” buttom, if he didn´t select the 5 correct answers, a pop up will appear saying how many corrects answers he had selected (you can see it here https://bit.ly/3V0jXrV) and a OK buttom. When the user clics on the buttom, the pop up will close and the results will appear to the songs he had selected, if the song was correct it will appear in green if it was incorrect it will appears in red (you can see it here https://bit.ly/4bG5dpw ) but the answer that he didn´t select previously will be enable so he can have a second chance to select the correct ones. He will be able to select as many answers as incorrect selections he had done previously (if he had selected 3 incorrect answers, now he will be able to select 3 answers). After this he will clic on the “continue” buttom.
4) After this will appear on the bottom of the page the photo 2 (XX2.jpg) the concept that is load from quizzes.csv, 2 buttoms and under the 3 buttoms a spotify playlist player thar will show the quiz play list (the id of the playlist is specify in quizzes.csv file).
Of the 3 buttoms, the first buttom is Play again (will load the same quiz again), Play another quiz (will load the index page with all the quizzes) and the last one is a link to playlist.html page (just put a simple link, I will create that page later).
I need this ready in 24 hours
I will provide access to my Wordpress, FTP I need that you work on my server.
I will send you the AI files of the desing, I need it exactly as the design.
My max budget por this is $100