Skip to content

Commit 6922ada

Browse files
eriicalieriicali
committed
QuizNavbarQuestion component
1 parent a7e7411 commit 6922ada

File tree

6 files changed

+228
-0
lines changed

6 files changed

+228
-0
lines changed

‎client/src/components/QuizNavbar/QuizNavbar.stories.svelte‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<script>
2+
import {Meta, Template, Story} from '@storybook/addon-svelte-csf';
3+
import QuizNavbar from './QuizNavbar.svelte';
4+
</script>
5+
6+
<Meta
7+
title="Example/QuizNavbar"
8+
component={QuizNavbar}
9+
argTypes={{
10+
questions: {control: 'array'},
11+
12+
}}
13+
/>
14+
15+
<Template let:args>
16+
<QuizNavbar {...args}/>
17+
</Template>
18+
19+
<Story
20+
name="Example Quiz Navbar"
21+
args={{
22+
questions: [
23+
{
24+
number: 1,
25+
state: 'unanswered'
26+
},
27+
{
28+
number: 2,
29+
state: 'answered'
30+
},
31+
{
32+
number: 3,
33+
state: 'unanswered'
34+
},
35+
{
36+
number: 4,
37+
state: 'answered'
38+
},
39+
{
40+
number: 5,
41+
state: 'answered'
42+
},
43+
{
44+
number: 6,
45+
state: 'answered'
46+
},
47+
{
48+
number: 7,
49+
state: 'answered'
50+
},
51+
{
52+
number: 8,
53+
state: 'answered'
54+
},
55+
{
56+
number: 9,
57+
state: 'answered'
58+
},
59+
{
60+
number: 10,
61+
state: 'answered'
62+
},
63+
{
64+
number: 11,
65+
state: 'unanswered'
66+
},
67+
{
68+
number: 12,
69+
state: 'answered'
70+
},
71+
{
72+
number: 13,
73+
state: 'unanswered'
74+
}
75+
]
76+
77+
}}
78+
/>
79+

‎client/src/components/QuizNavbar/QuizNavbar.svelte‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<script>
2+
import {QuizNavbarQuestion} from './QuizNavbarQuestion';
3+
export let questions;
4+
export let model;
5+
</script>
6+
7+
<div class="main">
8+
<div class="title">
9+
QUIZ
10+
</div>
11+
{#each questions as question}
12+
<QuizNavbarQuestion
13+
number={question.number}
14+
state={question.state}
15+
{model}
16+
/>
17+
{/each}
18+
</div>
19+
20+
<style type="text/scss">
21+
.main {
22+
height: auto;
23+
width: 16%;
24+
align-items: center;
25+
border-style: solid;
26+
/* border-radius: 0.6rem;*/
27+
border-width: 0.1rem;
28+
border-color: white;
29+
margin: 0.5rem;
30+
padding: 1rem;
31+
display: grid;
32+
grid-template-columns: auto auto auto auto auto;
33+
align-items: center;
34+
justify-content: center;
35+
background-color: #ffab40;
36+
37+
}
38+
39+
.title {
40+
text-align: center;
41+
font-family: "Assistant", sans-serif;
42+
color: white;
43+
font-weight: bold;
44+
width: 1rem;
45+
padding: 1rem;
46+
}
47+
@media only screen and (max-width: 1900px) {
48+
.main {
49+
grid-template-columns: auto auto auto auto;
50+
}
51+
}
52+
@media only screen and (max-width: 1600px) {
53+
.main {
54+
grid-template-columns: auto auto auto;
55+
}
56+
}
57+
@media only screen and (max-width: 1300px) {
58+
.main {
59+
grid-template-columns: auto auto;
60+
}
61+
}
62+
@media only screen and (max-width: 920px) {
63+
.main {
64+
grid-template-columns: auto;
65+
}
66+
}
67+
68+
</style>
69+

‎client/src/components/QuizNavbar/QuizNavbarQuestion/QuizNavbarQuestion.stories.svelte‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script>
2+
import {Meta, Template, Story} from '@storybook/addon-svelte-csf';
3+
import QuizNavbarQuestion from './QuizNavbarQuestion.svelte';
4+
</script>
5+
6+
<Meta
7+
title="Example/QuizNavbarQuestion"
8+
component={QuizNavbarQuestion}
9+
argTypes={{
10+
11+
number: {control: 'number'},
12+
state: {
13+
options: ['unanswered', 'answered']
14+
},
15+
16+
}}
17+
/>
18+
19+
<Template let:args>
20+
<QuizNavbarQuestion {...args}/>
21+
</Template>
22+
23+
<Story
24+
name="Question 14"
25+
args={{
26+
number: 14,
27+
state: "unanswered"
28+
29+
}}
30+
/>
31+
32+
<Story
33+
name="Question 7"
34+
args={{
35+
number: 7,
36+
state: "answered"
37+
}}
38+
/>

‎client/src/components/QuizNavbar/QuizNavbarQuestion/QuizNavbarQuestion.svelte‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script>
2+
export let number;
3+
export let state;
4+
export let model;
5+
6+
</script>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<div class="main {state}">
9+
{number}
10+
11+
</div>
12+
13+
<style>
14+
.main{
15+
height: 1rem;
16+
align-items: center;
17+
border-style: solid;
18+
border-radius: 0.5rem;
19+
border-width: 0.1rem;
20+
/* border-color: #c0c0c0; */
21+
22+
margin: 0.5rem;
23+
width: 1rem;
24+
padding: 1rem;
25+
font-family: "Assistant", sans-serif;
26+
27+
}
28+
29+
.answered {
30+
background-color: #99ccff;
31+
border-color: #99ccff;
32+
color: white;
33+
}
34+
35+
.unanswered {
36+
background-color: white;
37+
border-color: white;
38+
}
39+
40+
</style>

‎client/src/components/QuizNavbar/QuizNavbarQuestion/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {default as QuizNavbarQuestion} from './QuizNavbarQuestion.svelte';

‎client/src/components/QuizNavbar/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {default as QuizNavbar} from './QuizNavbar.svelte';

0 commit comments

Comments
 (0)