Skip to content
This repository was archived by the owner on Dec 8, 2022. It is now read-only.

Commit 90ca8be

Browse files
reskin QuizFinished, QuizFinishedFail, QuizScroll
1 parent c65801d commit 90ca8be

File tree

3 files changed

+100
-80
lines changed

3 files changed

+100
-80
lines changed

src/components/QuizScroll.vue

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
</template>
1414

1515
<script>
16+
// TODO: rename this file at some point, since it's no longer a scroll
1617
export default {
1718
name: "quizScroll"
1819
};
@@ -21,9 +22,9 @@ export default {
2122
<style lang="scss" scoped>
2223
.quiz-scroll {
2324
width: 550px;
24-
height: 650px;
2525
display: flex;
26-
margin-top: 30px;
26+
margin: 30px 0;
27+
padding: 10px 0;
2728
flex-direction: column;
2829
border: 8px solid #c2cfe1;
2930
background: url("/images/module-background.png");
@@ -41,7 +42,7 @@ export default {
4142
margin-top: 10px;
4243
font-size: 50px;
4344
top: 42px;
44-
color: white !important;
45+
color: white;
4546
font-family: "buWicked";
4647
}
4748
}
@@ -59,8 +60,6 @@ export default {
5960
6061
.scroll-content {
6162
width: 420px;
62-
margin-left: auto;
63-
margin-right: auto;
6463
font-size: 24px;
6564
color: #031e41 !important;
6665
font-family: "Barrow2Light";

src/views/Quiz/QuizFinished.vue

Lines changed: 50 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,53 @@
11
<template>
2-
<div class="mt-6">
3-
<v-row justify="center">
4-
<quiz-scroll>
5-
<template v-slot:title>Congratulations!</template>
6-
<template v-slot:default>
7-
<div style="padding-left:130px; padding-right: 130px;">
8-
Congratulations young pilgrim!
9-
<br />
10-
<br />
11-
You've qualified for the final round of The Dragon Quest.
12-
<br /><br />
2+
<div class="mt-6 wrapper">
3+
<!-- <v-row justify="center"> -->
4+
<quiz-scroll>
5+
<template v-slot:title>Congratulations!</template>
6+
<template v-slot:default>
7+
<div>
8+
<p>Congratulations young pilgrim!</p>
9+
10+
<p>You've qualified for the final round of The Dragon Quest.</p>
11+
12+
<p>
1313
To win the grand prize of $100 and a free STEAM access code from
1414
Endless, come back when the voting period begins, April 26 at 5:00
1515
PM CT, to gather votes and cast your vote on who you think has the
1616
best solution for the final answer.
17-
<br /><br />
17+
</p>
18+
19+
<p>
1820
The player with the highest number of votes will be crowned the
1921
champion on May 1. Will you be the champion …
20-
<br /><br />Good luck! <br /><br />
21-
<v-btn :to="{ name: 'voting' }" color="white" light
22-
>Cast Your Votes Here</v-btn
23-
><br />
24-
<v-btn
25-
class="mr-3 mt-5"
26-
:style="{ backgroundColor: 'white !important' }"
27-
x-large
28-
color="blue"
29-
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fcodewizardshq.com%2Fchallenge%2F&amp;src=sdkpreparse"
30-
icon
31-
><v-icon>mdi-facebook</v-icon></v-btn
32-
>
33-
<v-btn
34-
class="mt-5"
35-
:style="{ backgroundColor: 'white !important' }"
36-
x-large
37-
color="blue"
38-
href="https://twitter.com/intent/tweet?text=The%20Dragon%20Quest%20%E2%80%93%20Code%20Challenge&url=https%3A%2F%2Fcodewizardshq.com%2Fchallenge%2F&original_referer="
39-
icon
40-
><v-icon>mdi-twitter</v-icon></v-btn
41-
>
42-
</div>
43-
</template>
44-
</quiz-scroll>
45-
</v-row>
22+
</p>
23+
24+
<p>Good luck!</p>
25+
26+
<v-btn :to="{ name: 'voting' }" color="white" light
27+
>Cast Your Votes Here</v-btn
28+
><br />
29+
<v-btn
30+
class="mr-3 mt-5"
31+
:style="{ backgroundColor: 'white !important' }"
32+
x-large
33+
color="blue"
34+
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fcodewizardshq.com%2Fchallenge%2F&amp;src=sdkpreparse"
35+
icon
36+
><v-icon>mdi-facebook</v-icon></v-btn
37+
>
38+
<v-btn
39+
class="mt-5"
40+
:style="{ backgroundColor: 'white !important' }"
41+
x-large
42+
color="blue"
43+
href="https://twitter.com/intent/tweet?text=The%20Dragon%20Quest%20%E2%80%93%20Code%20Challenge&url=https%3A%2F%2Fcodewizardshq.com%2Fchallenge%2F&original_referer="
44+
icon
45+
><v-icon>mdi-twitter</v-icon></v-btn
46+
>
47+
</div>
48+
</template>
49+
</quiz-scroll>
50+
<!-- </v-row> -->
4651
</div>
4752
</template>
4853

@@ -56,3 +61,10 @@ export default {
5661
mounted() {}
5762
};
5863
</script>
64+
65+
<style lang="scss" scoped>
66+
.wrapper {
67+
display: flex;
68+
justify-content: center;
69+
}
70+
</style>
Lines changed: 46 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,47 @@
11
<template>
2-
<div class="mt-6">
3-
<v-row justify="center">
4-
<quiz-scroll>
5-
<template v-slot:title>It's Over!</template>
6-
<template v-slot:default>
7-
<div>
8-
Sorry {{ firstName }}, your mission has ended.
9-
<br />
10-
<br />
2+
<div class="mt-6 wrapper">
3+
<!-- <v-row justify="center"> -->
4+
<quiz-scroll>
5+
<template v-slot:title>It's Over!</template>
6+
<template v-slot:default>
7+
<div>
8+
<p>Sorry {{ firstName }}, your mission has ended.</p>
9+
10+
<p>
1111
Your efforts were admirable! Nym and the Allsnacks Alliance thank
1212
you.
13-
<br />
14-
<br />
13+
</p>
14+
15+
<p>
1516
You can still vote for this year's winner from April 26-30 and try
1617
again next year.
17-
<br /><br />
18-
<v-btn :to="{ name: 'voting' }" color="white" light
19-
>Cast Your Votes Here</v-btn
20-
><br />
21-
<!-- <v-btn
22-
class="mr-3 mt-5"
23-
:style="{ backgroundColor: 'white !important' }"
24-
x-large
25-
color="blue"
26-
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fcodewizardshq.com%2Fchallenge%2F&amp;src=sdkpreparse"
27-
icon
28-
><v-icon>mdi-facebook</v-icon></v-btn
29-
>
30-
<v-btn
31-
class="mt-5"
32-
:style="{ backgroundColor: 'white !important' }"
33-
x-large
34-
color="blue"
35-
href="https://twitter.com/intent/tweet?text=The%20Dragon%20Quest%20%E2%80%93%20Code%20Challenge&url=https%3A%2F%2Fcodewizardshq.com%2Fchallenge%2F&original_referer="
36-
icon
37-
><v-icon>mdi-twitter</v-icon></v-btn
38-
> -->
39-
</div>
40-
</template>
41-
</quiz-scroll>
42-
</v-row>
18+
</p>
19+
20+
<v-btn :to="{ name: 'voting' }" color="white" light
21+
>Cast Your Votes Here</v-btn
22+
><br />
23+
<v-btn
24+
class="mr-3 mt-5"
25+
:style="{ backgroundColor: 'white !important' }"
26+
x-large
27+
color="blue"
28+
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fcodewizardshq.com%2Fchallenge%2F&amp;src=sdkpreparse"
29+
icon
30+
><v-icon>mdi-facebook</v-icon></v-btn
31+
>
32+
<v-btn
33+
class="mt-5"
34+
:style="{ backgroundColor: 'white !important' }"
35+
x-large
36+
color="blue"
37+
href="https://twitter.com/intent/tweet?text=The%20Dragon%20Quest%20%E2%80%93%20Code%20Challenge&url=https%3A%2F%2Fcodewizardshq.com%2Fchallenge%2F&original_referer="
38+
icon
39+
><v-icon>mdi-twitter</v-icon></v-btn
40+
>
41+
</div>
42+
</template>
43+
</quiz-scroll>
44+
<!-- </v-row> -->
4345
</div>
4446
</template>
4547

@@ -58,3 +60,10 @@ export default {
5860
}
5961
};
6062
</script>
63+
64+
<style lang="scss" scoped>
65+
.wrapper {
66+
display: flex;
67+
justify-content: center;
68+
}
69+
</style>

0 commit comments

Comments
 (0)