├── README.md
├── style.css
├── index.htm
└── main.js
/README.md:
--------------------------------------------------------------------------------
1 | # Underrated Artists Quiz
2 |
3 | Take this quiz and find an underrated hip hop/r&b artist that you've (possibly) never heard of before!
4 |
5 | ## A Quick Biography
6 |
7 | Today, it's easy for people to think of hip hop from the top artists. Ranging from seriously emotional verses to eerie autotuned pitches, take this quiz to discover lesser-known, quality music: Underrated Artists Quiz.
8 |
9 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* Screen sizes:
2 | -iPhones 6->X: 375 px
3 | -iPhones Landscape: 568-812px (try 629px)
4 | */
5 |
6 |
7 | @viewport {
8 | width: device-width;
9 | zoom: 1.0;
10 | }
11 |
12 | @-ms-viewport {
13 | width: device-width;
14 | }
15 |
16 | @media screen and (max-width: 629px) {
17 |
18 | /* body {
19 | width: 80%;
20 | height: 80%;
21 | margin: 0;
22 | padding: 0;
23 | }
24 | */
25 | h1 {
26 | font-size: 120%;
27 | }
28 |
29 | /*
30 | .line {
31 | width: 70%;
32 | }
33 |
34 | #frame {
35 | font-size: 80%;
36 | } */
37 |
38 | /* #form {
39 | margin-left: auto;
40 | margin-right: auto;
41 | } */
42 | }
43 |
44 | html {
45 | width: 100%;
46 | height: 100%;
47 | }
48 |
49 | body {
50 | margin: 0;
51 | padding: 0;
52 | background-color: lightblue;
53 | width: 100%;
54 | height: 100%;
55 | }
56 |
57 | .container {
58 | position: relative;
59 | text-align: center;
60 | color: black;
61 | }
62 |
63 | .container p {
64 | display: inline;
65 | }
66 |
67 | .wrapper {
68 | width:75%;
69 | margin-left: auto;
70 | margin-right: auto;
71 | }
72 |
73 | h1 {
74 | text-align: center;
75 | text-transform: uppercase;
76 | margin-top: 20px;
77 | }
78 |
79 | h3 {
80 | font-size: 80%;
81 | }
82 |
83 | .wrapper h2 {
84 | text-align: left;
85 | }
86 |
87 | .line {
88 | height: 25px;
89 | min-width: 75%;
90 | margin: 0 auto 10px;
91 | line-height: 25px;
92 | font-size: 60%;
93 | color: #fff;
94 | padding: 0 0 0 10px;
95 | position: relative;
96 | left: 0px;
97 |
98 | }
99 |
100 | .line::before{
101 | content: '';
102 | width: 100%;
103 | position: absolute;
104 | left: 0;
105 | height: 25px;
106 | top: 0;
107 | z-index: -2;
108 | background: #d3d6d7;
109 | }
110 |
111 | .line::after {
112 | /*displays the line bar*/
113 | /* content: ''; */
114 | background: #333;
115 | height: 25px;
116 | transition: 0.8s;
117 | display: block;
118 | width: 100%;
119 | animation: animate 1 3.5s;
120 | position: absolute;
121 | top: 0;
122 | left: 0;
123 | z-index: -1;
124 | }
125 |
126 | .vertical-radio-buttons {
127 | width: 47%;
128 | margin-left: auto;
129 | margin-right: auto;
130 | }
131 |
132 | .vertical-radio-buttons div {
133 | display: block;
134 | padding: 0 0 7px 7;
135 | clear: both;
136 | }
137 |
138 | .vertical-radio-buttons span {
139 | display: block;
140 | padding: center;
141 | cursor: inherit;
142 | }
143 |
144 | #button {
145 | color: rgb(66, 145, 219);
146 | font-family: 'Gill Sans';
147 | font-weight: 10px;
148 | font-size: 20px;
149 | text-align: center;
150 | background-color: whitesmoke;
151 | border: solid green;
152 | border-radius: 30px;
153 | outline: none;
154 |
155 | padding: 1px 10px;
156 |
157 | -webkit-transition-duration: 200ms;
158 | transition-duration: 200ms;
159 | }
160 |
161 | #button:hover {
162 | color: blue;
163 | background-color: aquamarine;
164 | }
165 |
166 | #reset {
167 | color: rgb(66, 145, 219);
168 | font-family: 'Gill Sans';
169 | font-weight: 10px;
170 | font-size: 20px;
171 | text-align: center;
172 | background-color: whitesmoke;
173 | border: solid green;
174 | border-radius: 30px;
175 | outline: none;
176 |
177 | padding: 1px 10px;
178 |
179 | -webkit-transition-duration: 200ms;
180 | transition-duration: 200ms;
181 | }
182 |
183 | #reset:hover {
184 | color: blue;
185 | background-color: aquamarine;
186 | }
187 |
188 | @keyframes animate {
189 | 0% {
190 | width: 0;
191 | }
192 | 101% {
193 | width: 100;
194 | }
195 | }
--------------------------------------------------------------------------------
/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Underrated Artists Quiz
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Underrated Artists Quiz
17 |
18 |
19 |
20 |
52 |
53 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
0%
66 |
67 |
0%
68 |
69 |
0%
70 |
71 |
0%
72 |
73 |
75 |
76 |
77 |
78 |
80 |
81 |
83 |
84 |
86 |
87 |
89 |
90 |
92 |
93 |
95 |
96 |
98 |
99 |
101 |
102 |
104 |
105 |
107 |
108 |
110 |
111 |
112 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | /*
2 | Author: Austin Hale
3 | */
4 |
5 | var answers = document.getElementsByName("choices");
6 |
7 | function refresh() {
8 | var styleElem = document.head.appendChild(document.createElement("style"));
9 | document.getElementById('questions').innerHTML = questions_arr[question_number-1];
10 |
11 | for (var i=1; i<=4;i++) {
12 | document.getElementById('answer'+i).innerHTML = getAnswerChoices();
13 | document.getElementById('ans'+i).checked = false;
14 | }
15 | styleElem.innerHTML = "h3 {text-align: center;}";
16 | }
17 |
18 | var questions_arr =
19 | ["Which age range best describes you?", "What is your preferred method of listening to music?",
20 | "What is your favorite flow style?", "What's your favorite movie genre?", "What do you like to do on the weekends?",
21 | "How do you feel about the presence of social issues in music?", "What's your take on autotune?",
22 | "Who's one of your favorite mainstream artists?", "Pick a region that best describes your taste:",
23 | "Which do you prefer: hooks or choruses?"];
24 |
25 | var answers_arr = [
26 | ["0-17", "Earbuds", "Fast", "Action", "Go out and party", "I'm with it", "T-Pain is my idol", "J. Cole", "East Coast", "Hooks make the song"],
27 | ["18-24", "Over-the-ear headphones", "Medium paced", "Horror", "Chill with some friends", "Keep it out of music", "I think it's great", "Drake", "West Coast", "Little to no hooks. I like it old school."],
28 | ["25-39", "Small speakers", "Smooth and slow", "Comedy", "Stay home alone", "As long as it isn't overbearing, it's good", "Not a huge fan", "Kendrick Lamar", "Southern Rap", "Both"],
29 | ["40+", "Huge speakers", "Other/Unique", "Thriller", "Play video games", "Not a huge fan, but I'll listen sometimes", "I hate autotune. I'm old", "I don't listen to mainstream artists", "Area doesn't matter", "Neither. I like production."]
30 | ];
31 |
32 | var question_number = 1;
33 | var idx = 0;
34 | var first_question = false;
35 |
36 | function getAnswerChoices() {
37 | if (first_question) { idx++ };
38 |
39 | while (idx < answers.length) {
40 | switch (answers[idx].value) {
41 | case 'a':
42 | first_question = true;
43 | return answers_arr[idx][question_number - 1];
44 | case 'b':
45 | return answers_arr[idx][question_number - 1];
46 | case 'c':
47 | return answers_arr[idx][question_number - 1];
48 | case 'd':
49 | first_question = false;
50 | return answers_arr[idx][question_number - 1];
51 | default:
52 | return;
53 | }
54 | }
55 | }
56 |
57 | // List of all possible artist results
58 | var amir_obe = 0
59 | var sir = 0
60 | var jalen_santoy = 0;
61 | var the88glam = 0;
62 | var derek_pope = 0;
63 | var cunninlynguists = 0;
64 | var joyner_lucas = 0
65 | var royce_da_59 = 0
66 | var flatbush_zombies = 0;
67 | var kirk_knight = 0;
68 | var nyck_caution = 0;
69 |
70 | function submitAnswer() {
71 | var i = 0, options = answers.length;
72 | var checked = false;
73 | var user_choice;
74 |
75 | for (; i < options; i++) {
76 | if (answers[i].checked) {
77 | user_choice = answers[i].value;
78 | checked = true;
79 | }
80 | }
81 |
82 | if (!checked) {
83 | // alert("answer not checked");
84 | return;
85 | }
86 |
87 | switch (user_choice) {
88 | case 'a':
89 | incrAArtists();
90 | break;
91 | case 'b':
92 | incrBArtists();
93 | break;
94 | case 'c':
95 | incrCArtists();
96 | break;
97 | case 'd':
98 | incrDArtists();
99 | break;
100 | default:
101 | return;
102 | }
103 |
104 | question_number++;
105 | idx = 0;
106 | refresh();
107 | if (question_number==10) {
108 | document.getElementById('button').innerHTML="Submit Quiz";
109 | }
110 | if (question_number>10) {
111 | getResults();
112 | }
113 | }
114 |
115 | function getResults() {
116 |
117 | removeElements();
118 | document.getElementById('reset').style.display='block';
119 | document.getElementById('wrapper').style.display='block';
120 |
121 | var styleElem = document.head.appendChild(document.createElement("style"));
122 | styleElem.innerHTML = "#reset {margin: 0 auto;}";
123 |
124 | var artist_picks = {"Amir Obe": amir_obe, "SiR": sir, "Jalen Santoy": jalen_santoy,
125 | "Derek Pope": derek_pope, "88GLAM": the88glam, "Cunninlynguists": cunninlynguists,
126 | "Joyner Lucas": joyner_lucas, "Royce da 5'9\"": royce_da_59, "Flatbush Zombies": flatbush_zombies,
127 | "Kirk Knight": kirk_knight, "Nyck Caution": nyck_caution};
128 |
129 | var artist_perc = [amir_obe,sir,jalen_santoy,derek_pope,the88glam,
130 | cunninlynguists,joyner_lucas,flatbush_zombies,kirk_knight,nyck_caution];
131 |
132 | var keysSorted = Object.keys(artist_picks).sort(function(a,b){return artist_picks[b]-artist_picks[a]});
133 |
134 | artist_perc.sort(function(a,b){return b-a});
135 |
136 | displayCustomResults(keysSorted, artist_perc);
137 | }
138 |
139 | function displayCustomResults(sortedArtists, sortedPercentage) {
140 | for(var i=0; i<4; i++) {
141 |
142 | var styleElem = document.head.appendChild(document.createElement("style"));
143 | styleElem.innerHTML = ".line::after {content: '';} .line" + (i+1) +
144 | "::after {max-width: " + sortedPercentage[i] + "0%;}";
145 |
146 | document.getElementById('perc' + (i+1)).style.display = 'block';
147 | document.getElementById('perc' + (i+1)).innerHTML = sortedPercentage[i] + "0%";
148 |
149 | document.getElementById('result'+(i+1)).innerHTML = sortedArtists[i];
150 | }
151 |
152 | document.getElementById(''+sortedArtists[0]+'').style.display = 'block';
153 | }
154 |
155 | function removeElements() {
156 | document.getElementById('button').style.display = "none";
157 |
158 | for (var i=1; i<=4;i++) {
159 | document.getElementById('answer'+i).style.display = "none";
160 | document.getElementById('ans'+i).style.display = "none";
161 | }
162 |
163 | document.getElementById('questions').style.display = "none";
164 | document.getElementById('form').style.display = "none";
165 | }
166 |
167 | function incrAArtists() {
168 | switch (question_number) {
169 | case 1:
170 | derek_pope++, the88glam++ , nyck_caution++; break;
171 | case 2:
172 | sir++, derek_pope++, cunninlynguists++; break;
173 | case 3:
174 | joyner_lucas++, nyck_caution++, flatbush_zombies++; break;
175 | case 4:
176 | nyck_caution++, royce_da_59++, jalen_santoy++; break;
177 | case 5:
178 | flatbush_zombies++, the88glam++, jalen_santoy++; break;
179 | case 6:
180 | cunninlynguists++, joyner_lucas++, royce_da_59++; break;
181 | case 7:
182 | amir_obe++, derek_pope++, the88glam++; break;
183 | case 8:
184 | jalen_santoy++, sir++, royce_da_59++; break;
185 | case 9:
186 | joyner_lucas++, flatbush_zombies++, kirk_knight++, nyck_caution++; break;
187 | case 10:
188 | sir++, kirk_knight++; break;
189 | default:
190 | return;
191 | }
192 | }
193 |
194 | function incrBArtists() {
195 | switch (question_number) {
196 | case 1:
197 | flatbush_zombies++, kirk_knight++, nyck_caution++; break;
198 | case 2:
199 | the88glam++, royce_da_59++, nyck_caution++; break;
200 | case 3:
201 | kirk_knight++, cunninlynguists++, royce_da_59++; break;
202 | case 4:
203 | amir_obe++, derek_pope++, joyner_lucas++; break;
204 | case 5:
205 | amir_obe++, sir++; break;
206 | case 6:
207 | the88glam++, sir++, amir_obe++; break;
208 | case 7:
209 | flatbush_zombies++, kirk_knight++; break;
210 | case 8:
211 | amir_obe++, derek_pope++, the88glam++; break;
212 | case 9:
213 | derek_pope++, amir_obe++, sir++; break;
214 | case 10:
215 | cunninlynguists++, royce_da_59++, nyck_caution++; break;
216 | default:
217 | return;
218 | }
219 | }
220 |
221 | function incrCArtists() {
222 | switch (question_number) {
223 | case 1:
224 | jalen_santoy++, sir++; break;
225 | case 2:
226 | jalen_santoy++, joyner_lucas++, kirk_knight++; break;
227 | case 3:
228 | sir++, the88glam++; break;
229 | case 4:
230 | cunninlynguists++, flatbush_zombies++; break;
231 | case 5:
232 | amir_obe++, sir++; break;
233 | case 6:
234 | jalen_santoy++, flatbush_zombies++, kirk_knight++; break;
235 | case 7:
236 | sir++, nyck_caution++, jalen_santoy++, joyner_lucas++; break;
237 | case 8:
238 | flatbush_zombies++, joyner_lucas++; break;
239 | case 9:
240 | jalen_santoy++, cunninlynguists++; break;
241 | case 10:
242 | flatbush_zombies++, joyner_lucas++, jalen_santoy++; break;
243 | default:
244 | return;
245 | }
246 | }
247 |
248 | function incrDArtists() {
249 | switch (question_number) {
250 | case 1:
251 | cunninlynguists++, joyner_lucas++, royce_da_59++; break;
252 | case 2:
253 | amir_obe++, flatbush_zombies++; break;
254 | case 3:
255 | sir++, the88glam++; break;
256 | case 4:
257 | amir_obe++, derek_pope++, jalen_santoy++; break;
258 | case 5:
259 | derek_pope++, joyner_lucas++, nyck_caution++; break;
260 | case 6:
261 | derek_pope++, nyck_caution++; break;
262 | case 7:
263 | cunninlynguists++, royce_da_59++; break;
264 | case 8:
265 | cunninlynguists++, kirk_knight++, nyck_caution++; break;
266 | case 9:
267 | the88glam++, royce_da_59++; break;
268 | case 10:
269 | amir_obe++, derek_pope++, the88glam++; break;
270 | default:
271 | return;
272 | }
273 | }
--------------------------------------------------------------------------------