Skip to content

Commit 6fb8d2c

Browse files
JulienDemarqueJulienDemarque
committed
feat: more ui for quizz pages and clean up data structure
1 parent fc86459 commit 6fb8d2c

File tree

9 files changed

+147
-126
lines changed

9 files changed

+147
-126
lines changed

‎.eslintrc.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222
"no-absolute-path": "off",
2323
"react/prop-types": 0,
2424
"prefer-template": "off",
25-
"react/no-array-index-key": "off"
25+
"react/no-array-index-key": "off",
26+
"react/jsx-boolean-value": "off",
27+
"react/jsx-curly-brace-presence": "off"
2628
}
2729
}

‎data/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Data for Code Quiz
22

3-
The `index.json` file at the root describes all the categories available for quizes. The `name` is how it will show up in the app, and the `key` maps to a folder containing quizzes.
3+
The `index.json` file at the root describes all the categories available for quizzes. The `name` is how it will show up in the app, and the `key` maps to a folder containing quizzes.
44

55
Inside each category folder, there will also be an `index.json` file. It will describe the quizzes (title, description, difficulty, answer choices, correct answer). The quizzes themselves will live in subfolders and use the file format for the language they are describing.
66

7-
Should difficulty be universal for all quizzes or allow categories to define their own range?
7+
Difficulty will go from 1 to 5

‎data/index.json

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

‎data/javascript/index.json

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,17 @@
11
{
2-
"name": "javascript",
3-
"subcategories": ["all", "arithmetic", "coercion"],
4-
"quizzes": [
5-
{
6-
"title": "Simple Add",
7-
"key": "simple-add",
8-
"categories": ["beginner", "interview"],
9-
"subcategory": "arithmetic"
10-
},
11-
{
12-
"title": "Plus Operator Coercion",
13-
"key": "plus-operator-coercion",
14-
"categories": ["beginner", "interview"],
15-
"subcategory": "coercion"
16-
},
17-
{
18-
"title": "Minus Operator Coercion",
19-
"key": "minus-operator-coercion",
20-
"categories": ["beginner", "interview"],
21-
"subcategory": "coercion"
22-
}
23-
],
24-
"minimumDifficulty": 1,
25-
"maximumDifficulty": 10
2+
"name": "javascript",
3+
"quizzes": [
4+
{
5+
"title": "Simple Add",
6+
"key": "simple-add"
7+
},
8+
{
9+
"title": "Plus Operator Coercion",
10+
"key": "plus-operator-coercion"
11+
},
12+
{
13+
"title": "Minus Operator Coercion",
14+
"key": "minus-operator-coercion"
15+
}
16+
]
2617
}

‎data/javascript/minus-operator-coercion/index.json

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
{
2-
"title": "Minus Operator Coercion",
3-
"description": "Understand the - operator coercion",
4-
"questionFile": "question.js",
5-
"difficulty": 1,
6-
"correctAnswer": "1 NaN 2",
7-
"answers": [
8-
{
9-
"answer": "NaN NaN NaN"
10-
},
11-
{
12-
"answer": "undefined undefined 2"
13-
},
14-
{
15-
"answer": "NaN NaN 2"
16-
},
17-
{
18-
"answer": "1 NaN 2"
19-
}
20-
]
2+
"title": "Minus Operator Coercion",
3+
"description": "Understand the - operator implicit type coercion",
4+
"questionFile": "question.js",
5+
"difficulty": 3,
6+
"explanation": "The - here is the arithmetic substraction operator. If the operands (the left and right of the -) are booleans or numbers or strings, it will coerce to numbers (true becomes 1, false becomes 0). If the operands are not valid numbers or cannot be coerce to numbers, it will result in NaN",
7+
"correctAnswer": "1 NaN 2",
8+
"answers": [
9+
{
10+
"answer": "NaN NaN NaN"
11+
},
12+
{
13+
"answer": "undefined undefined 2"
14+
},
15+
{
16+
"answer": "NaN NaN 2"
17+
},
18+
{
19+
"answer": "1 NaN 2"
20+
}
21+
]
2122
}

‎data/javascript/plus-operator-coercion/index.json

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
{
2-
"title": "Plus Operator Coercion",
3-
"description": "Understand the + operator coercion",
4-
"questionFile": "question.js",
5-
"difficulty": 1,
6-
"correctAnswer": "1 'truefoo' 'bar5'",
7-
"answers": [
8-
{
9-
"answer": "'true0' 'truefoo' 6"
10-
},
11-
{
12-
"answer": "1 'truefoo' 'bar5'"
13-
},
14-
{
15-
"answer": "true 'truefoo' 'bar5'"
16-
},
17-
{
18-
"answer": "true true 'bar5'"
19-
}
20-
]
2+
"title": "Plus Operator Coercion",
3+
"description": "Understand the + operator implicit type coercion",
4+
"questionFile": "question.js",
5+
"difficulty": 3,
6+
"explanation": "Since JavaScript is a weakly-typed language, values can also be converted between different types automatically, and it is called implicit type coercion. The + here is the arithmetic addition operator. If the operands (the left and right of the +) are booleans or numbers, it will coerce to numbers (true becomes 1, false becomes 0). If any of the operands is a string, it will do string concatenation.",
7+
"correctAnswer": "1 'truefoo' 'bar5'",
8+
"answers": [
9+
{
10+
"answer": "'true0' 'truefoo' 6"
11+
},
12+
{
13+
"answer": "1 'truefoo' 'bar5'"
14+
},
15+
{
16+
"answer": "true 'truefoo' 'bar5'"
17+
},
18+
{
19+
"answer": "true true 'bar5'"
20+
}
21+
]
2122
}

‎data/javascript/simple-add/index.json

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
{
2-
"title": "Simple Add",
3-
"description": "Solve a simple addition",
4-
"questionFile": "question.js",
5-
"difficulty": 1,
6-
"correctAnswer": "5",
7-
"answers": [
8-
{
9-
"answer": "3"
10-
},
11-
{
12-
"answer": "4"
13-
},
14-
{
15-
"answer": "5"
16-
},
17-
{
18-
"answer": "6"
19-
}
20-
]
2+
"title": "Simple Add",
3+
"description": "Solve a simple addition",
4+
"questionFile": "question.js",
5+
"difficulty": 1,
6+
"correctAnswer": "5",
7+
"explanation": "Arrow function is an other way to write a function, simpleAdd(2,3) returns the sum of 2 and 3",
8+
"answers": [
9+
{
10+
"answer": "3"
11+
},
12+
{
13+
"answer": "4"
14+
},
15+
{
16+
"answer": "5"
17+
},
18+
{
19+
"answer": "6"
20+
}
21+
]
2122
}

‎src/js/views/Homepage.jsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import React from 'react';
22
import { Container } from 'react-bootstrap';
33

44
const Homepage = () => {
5-
return <Container className="mt-5 mb-3">This is the Homepage</Container>;
5+
return (
6+
<Container className="mt-5 mb-3">
7+
<h1>Welcome to CodeQuizz</h1>
8+
</Container>
9+
);
610
};
711

812
export default Homepage;

‎src/js/views/JsExercise.jsx

Lines changed: 62 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect, useState } from 'react';
22
import Prism from 'prismjs';
3-
import { Alert, Button, Container, Form } from 'react-bootstrap';
3+
import { Alert, Button, Col, Container, Form, Row } from 'react-bootstrap';
44
import { LinkContainer } from 'react-router-bootstrap';
55

66
import Question from '../components/JavaScriptQuestion';
@@ -29,6 +29,12 @@ const JsExercise = ({ match }) => {
2929
setUserAnswer(e.target.value);
3030
};
3131

32+
useEffect(() => {
33+
/* if we have move to a new exercise, match object from react router will be different,
34+
so we can trigger a clean up of the state */
35+
setResult('');
36+
}, [match]);
37+
3238
useEffect(() => {
3339
// Find the index of the current question in the list
3440
const indexCurrent = JsList.quizzes.findIndex(q => {
@@ -64,39 +70,62 @@ const JsExercise = ({ match }) => {
6470
return (
6571
<Container className="mt-5 mb-3">
6672
<h2>{data.title}</h2>
73+
<p>{data.description}</p>
6774
<Question question={question} />
68-
<Form className="mt-5 mb-3" action="">
69-
{data.answers &&
70-
data.answers.map((a, index) => {
71-
return (
72-
<div key={index}>
73-
<Form.Check
74-
inline
75-
label={a.answer}
76-
onChange={handleOnChange}
77-
type="radio"
78-
name="answer"
79-
value={a.answer}
80-
/>
81-
<br />
82-
</div>
83-
);
84-
})}
85-
<Button className="mt-2" type="submit" onClick={onSubmit}>
86-
Check
87-
</Button>
88-
</Form>
89-
{result === 'success' && <Alert variant="success">Right Answer!</Alert>}
90-
{result === 'fail' && (
91-
<Alert variant="warning">Sorry, Wrong Answer!</Alert>
92-
)}
93-
{nextQuestion.key && (
94-
<div>
95-
<p>Next Question: </p>
96-
<LinkContainer to={`/javascript/${nextQuestion.key}`}>
97-
<Button>{nextQuestion.title}</Button>
98-
</LinkContainer>
99-
</div>
75+
<Row>
76+
<Col xs={12} md={6} className="mt-5 mb-3">
77+
<Form action="">
78+
{data.answers &&
79+
data.answers.map((a, index) => {
80+
return (
81+
<div key={index}>
82+
<Form.Check
83+
inline
84+
label={a.answer}
85+
onChange={handleOnChange}
86+
type="radio"
87+
name="answer"
88+
value={a.answer}
89+
disabled={result !== ''}
90+
/>
91+
<br />
92+
</div>
93+
);
94+
})}
95+
{userAnswer !== '' && !result && (
96+
<Button className="mt-2" type="submit" onClick={onSubmit}>
97+
Check Yourself
98+
</Button>
99+
)}
100+
</Form>
101+
</Col>
102+
<Col xs={12} md={6} className="mt-5 mb-3">
103+
{result === 'success' && (
104+
<Alert variant="success">Right Answer!</Alert>
105+
)}
106+
{result === 'fail' && (
107+
<Alert variant="warning">
108+
Sorry, Wrong Answer! The right answer was:{' '}
109+
<strong style={{ fontWeight: 700 }}>{data.correctAnswer}</strong>
110+
</Alert>
111+
)}
112+
{nextQuestion.key && result && (
113+
<div>
114+
<p>Next Question: </p>
115+
<LinkContainer to={`/javascript/${nextQuestion.key}`}>
116+
<Button>{nextQuestion.title}</Button>
117+
</LinkContainer>
118+
</div>
119+
)}
120+
</Col>
121+
</Row>
122+
{result && (
123+
<Row className="mt-5 mb-3">
124+
<Col>
125+
<h5>Explanation:</h5>
126+
<p>{data.explanation}</p>
127+
</Col>
128+
</Row>
100129
)}
101130
</Container>
102131
);

0 commit comments

Comments
 (0)