react-quizifyy-component 1.0.1 โ 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -51
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
A dynamic and interactive quiz application built with React. Features real-time answer selection, smooth timer animation, result tracking, and a detailed summary page. Ideal for assessments, learning platforms, or trivia games.
|
|
4
4
|
|
|
5
|
-
 <!-- Replace with an actual screenshot if available -->
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -40,50 +40,6 @@ function App() {
|
|
|
40
40
|
|
|
41
41
|
---
|
|
42
42
|
|
|
43
|
-
## ๐ฏ Component API
|
|
44
|
-
|
|
45
|
-
### `<Question />`
|
|
46
|
-
|
|
47
|
-
Displays a single question with options.
|
|
48
|
-
|
|
49
|
-
**Props:**
|
|
50
|
-
|
|
51
|
-
| Prop | Type | Description |
|
|
52
|
-
|-------------------|----------|------------------------------------------|
|
|
53
|
-
| `question` | `object` | Question text and answer options |
|
|
54
|
-
| `index` | `number` | Current question index |
|
|
55
|
-
| `onSelectAnswer` | `func` | Callback when answer is selected |
|
|
56
|
-
|
|
57
|
-
---
|
|
58
|
-
|
|
59
|
-
## ๐ Summary Page
|
|
60
|
-
|
|
61
|
-
At the end of the quiz, the summary includes:
|
|
62
|
-
|
|
63
|
-
- โ
Number of correct answers
|
|
64
|
-
- โ Number of wrong answers
|
|
65
|
-
- ๐งพ List of all questions, selected answers, and correct answers
|
|
66
|
-
|
|
67
|
-
Useful for review and performance insight.
|
|
68
|
-
|
|
69
|
-
---
|
|
70
|
-
|
|
71
|
-
## ๐จ Theme Customization
|
|
72
|
-
|
|
73
|
-
You can apply custom colors and styles via your own stylesheet or using Tailwind/CSS variables. Example:
|
|
74
|
-
|
|
75
|
-
```css
|
|
76
|
-
:root {
|
|
77
|
-
--primary-color: #00FFF7;
|
|
78
|
-
--background-color: #0D0D0D;
|
|
79
|
-
--text-color: #FFFFFF;
|
|
80
|
-
}
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
Or simply add class-based styles (e.g., `className="dark neon-theme"`).
|
|
84
|
-
|
|
85
|
-
---
|
|
86
|
-
|
|
87
43
|
## ๐ Using Custom Questions
|
|
88
44
|
|
|
89
45
|
To add your own quiz content, create a `questions.js` file in your project and export an array of question objects like this:
|
|
@@ -140,6 +96,35 @@ function App() {
|
|
|
140
96
|
|
|
141
97
|
---
|
|
142
98
|
|
|
99
|
+
## ๐ฏ Component API
|
|
100
|
+
|
|
101
|
+
### `<Question />`
|
|
102
|
+
|
|
103
|
+
Displays a single question with options.
|
|
104
|
+
|
|
105
|
+
**Props:**
|
|
106
|
+
|
|
107
|
+
| Prop | Type | Description |
|
|
108
|
+
|-------------------|----------|------------------------------------------|
|
|
109
|
+
| `question` | `object` | Question text and answer options |
|
|
110
|
+
| `index` | `number` | Current question index |
|
|
111
|
+
| `onSelectAnswer` | `func` | Callback when answer is selected |
|
|
112
|
+
|
|
113
|
+
---
|
|
114
|
+
|
|
115
|
+
## ๐ Summary Page
|
|
116
|
+
|
|
117
|
+
At the end of the quiz, the summary includes:
|
|
118
|
+
|
|
119
|
+
- โ
Number of correct answers
|
|
120
|
+
- โ Number of wrong answers
|
|
121
|
+
- โ Number of skipped answers
|
|
122
|
+
- ๐งพ List of all questions, selected answers, and correct answers
|
|
123
|
+
|
|
124
|
+
Useful for review and performance insight.
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
143
128
|
## ๐ Development Log
|
|
144
129
|
|
|
145
130
|
- โ
Designed and implemented summary page with result breakdown
|
|
@@ -149,9 +134,3 @@ function App() {
|
|
|
149
134
|
- โ
Improved progress bar transition for smoother experience
|
|
150
135
|
|
|
151
136
|
---
|
|
152
|
-
|
|
153
|
-
## ๐ License
|
|
154
|
-
|
|
155
|
-
This project is licensed under the MIT License.
|
|
156
|
-
|
|
157
|
-
---
|