Skip to content

Commit d8a8167

Browse files
committed
finished quiz styling
1 parent cfac255 commit d8a8167

File tree

5 files changed

+168
-113
lines changed

5 files changed

+168
-113
lines changed
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { InputGroup, FormControl } from 'react-bootstrap';
2+
3+
function FrBlock({
4+
title,
5+
question,
6+
answer,
7+
cssKey,
8+
}: {
9+
title: string;
10+
question: string;
11+
answer: string;
12+
cssKey: number;
13+
}) {
14+
return (
15+
<div className={`${cssKey % 2 === 1 ? 'white ' : 'gray '}row`}>
16+
<div className="col-md-6 text-center py-5 mx-auto">
17+
<h3 className="text-left mb-3">{title}</h3>
18+
<InputGroup className="mb-3">
19+
<div className="question-container p-4 shadow w-100">
20+
<p className="text-left">{question}</p>
21+
<br />
22+
<FormControl value={answer} disabled />
23+
</div>
24+
</InputGroup>
25+
</div>
26+
</div>
27+
);
28+
}
29+
30+
export default FrBlock;
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { RadioGroup, FormControlLabel, Radio } from '@material-ui/core';
2+
import { QuestionOption } from '../../../__generated__/types';
3+
4+
function renderQuestionOptions(options: QuestionOption[], answers: number[]) {
5+
const correctChoices = new Set<number>(answers);
6+
7+
return options.map((option: QuestionOption, index: number) => {
8+
const styleName = `${correctChoices.has(option.id) ? 'option-correct ' : ''}option col-md-12`;
9+
10+
return (
11+
<div className="row my-2">
12+
<div className={styleName}>
13+
<input type="radio" value={index} id={`${option.id}`} name="radio" />
14+
<label htmlFor={`${option.id}`}>{option.description}</label>
15+
</div>
16+
</div>
17+
);
18+
});
19+
}
20+
21+
function McBlock({
22+
title,
23+
question,
24+
options,
25+
answers,
26+
cssKey,
27+
}: {
28+
title: string;
29+
question: string;
30+
options: QuestionOption[];
31+
answers: number[];
32+
cssKey: number;
33+
}) {
34+
return (
35+
<div className={`${cssKey % 2 === 1 ? 'white ' : 'gray '}row`}>
36+
<div className="col-md-6 text-center py-5 mx-auto">
37+
<h3 className="text-left mb-3">{title}</h3>
38+
<div className="question-container p-4 shadow w-100">
39+
<p className="text-left">{question}</p>
40+
<br />
41+
<div className="mx-4">{renderQuestionOptions(options, answers)}</div>
42+
</div>
43+
</div>
44+
</div>
45+
);
46+
}
47+
48+
export default McBlock;

src/Components/TaskBlocks/QuizBlock/QuizBlock.tsx

Lines changed: 0 additions & 91 deletions
This file was deleted.

src/Components/TaskBlocks/TaskBlock.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,28 @@
2929
h3 {
3030
color: #4274f3;
3131
}
32+
33+
.question-container {
34+
border-radius: 7px;
35+
background-color: #fff;
36+
}
37+
38+
.option {
39+
background-color: #f2f2f2;
40+
border-radius: 25px;
41+
}
42+
43+
.question-container .option-correct {
44+
background-color: #4274f3;
45+
}
46+
47+
input[type='radio'] {
48+
visibility: hidden;
49+
}
50+
label {
51+
cursor: pointer;
52+
font-size: smaller;
53+
}
54+
input:checked + label {
55+
color: #4274f3;
56+
}

src/Screens/TaskView/BlockPageHandler/BlockPageHandler.tsx

Lines changed: 65 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,21 @@
33
/* eslint-disable react/no-array-index-key */
44
import {
55
FrBlockFieldsFragment,
6+
FrQuestionFieldsFragment,
67
GetTaskByIdQuery,
78
ImageBlockFieldsFragment,
89
McBlockFieldsFragment,
10+
McQuestionFieldsFragment,
911
QuizBlockFieldsFragment,
1012
TextBlockFieldsFragment,
1113
VideoBlockFieldsFragment,
1214
} from '../../../__generated__/types';
1315
import ImageBlock from '../../../Components/TaskBlocks/ImageBlock/ImageBlock';
1416
import TextBlock from '../../../Components/TaskBlocks/TextBlock/TextBlock';
1517
import VideoBlock from '../../../Components/TaskBlocks/VideoBlock/VideoBlock';
16-
import QuizBlock from '../../../Components/TaskBlocks/QuizBlock/QuizBlock';
1718
import IntroBlock from '../../../Components/TaskBlocks/IntroBlock/IntroBlock';
19+
import FrBlock from '../../../Components/TaskBlocks/FrBlock/FrBlock';
20+
import McBlock from '../../../Components/TaskBlocks/McBlock/McBlock';
1821

1922
function BlockPageHandler({
2023
taskInformation,
@@ -36,55 +39,95 @@ function BlockPageHandler({
3639
| QuizBlockFieldsFragment
3740
| VideoBlockFieldsFragment;
3841

39-
const blockList = pageBlocks.map((block: TaskBlock, index: number) => {
42+
type QuestionFieldsFragment = McQuestionFieldsFragment | FrQuestionFieldsFragment;
43+
44+
let tempIndex = 0;
45+
const blockList: any[] = [];
46+
pageBlocks.forEach((block: TaskBlock) => {
4047
switch (block.__typename) {
4148
case 'ImageBlock': {
4249
const iBlock = block;
43-
return (
50+
blockList.push(
4451
<ImageBlock
4552
title={iBlock.title}
4653
contents={iBlock.imageUrl}
47-
key={index}
48-
cssKey={index}
54+
key={tempIndex}
55+
cssKey={tempIndex}
4956
/>
5057
);
58+
tempIndex += 1;
59+
break;
5160
}
5261
case 'TextBlock': {
5362
const tBlock = block;
54-
return (
63+
blockList.push(
5564
<TextBlock
5665
title={tBlock.title}
5766
contents={tBlock.contents}
58-
key={index}
59-
cssKey={index}
67+
key={tempIndex}
68+
cssKey={tempIndex}
6069
/>
6170
);
71+
tempIndex += 1;
72+
break;
6273
}
6374
case 'QuizBlock': {
64-
const qBlock = block;
65-
return (
66-
<QuizBlock
67-
title={qBlock.title}
68-
questions={qBlock.questions}
69-
reqScore={qBlock.requiredScore}
70-
key={index}
71-
cssKey={index}
72-
/>
73-
);
75+
const { questions }: { questions: QuestionFieldsFragment[] } = block;
76+
77+
questions.forEach((question: QuestionFieldsFragment) => {
78+
switch (question.__typename) {
79+
case 'FrQuestion': {
80+
const answer = question.answer ? question.answer : 'Not answered.';
81+
blockList.push(
82+
<FrBlock
83+
title={block.title}
84+
question={question.description}
85+
answer={answer}
86+
key={tempIndex}
87+
cssKey={tempIndex}
88+
/>
89+
);
90+
tempIndex += 1;
91+
break;
92+
}
93+
case 'McQuestion': {
94+
blockList.push(
95+
<McBlock
96+
title={block.title}
97+
question={question.description}
98+
options={question.options}
99+
answers={question.answers}
100+
key={tempIndex}
101+
cssKey={tempIndex}
102+
/>
103+
);
104+
tempIndex += 1;
105+
break;
106+
}
107+
default: {
108+
blockList.push(<></>);
109+
break;
110+
}
111+
}
112+
});
113+
break;
74114
}
75115
case 'VideoBlock': {
76116
const vBlock = block;
77-
return (
117+
blockList.push(
78118
<VideoBlock
79119
title={vBlock.title}
80120
contents={vBlock.videoUrl}
81-
key={index}
82-
cssKey={index}
121+
key={tempIndex}
122+
cssKey={tempIndex}
83123
/>
84124
);
125+
tempIndex += 1;
126+
break;
85127
}
86128
default:
87-
return <></>;
129+
blockList.push(<></>);
130+
break;
88131
}
89132
});
90133

0 commit comments

Comments
 (0)