diff --git a/docs/assets/quiz-recap-intro.png b/docs/assets/quiz-recap-intro.png
index c07c00a..debaff4 100644
Binary files a/docs/assets/quiz-recap-intro.png and b/docs/assets/quiz-recap-intro.png differ
diff --git a/src/App.test.tsx b/src/App.test.tsx
index 57e7e3a..edab9e0 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
import userEvent, { UserEvent } from '@testing-library/user-event';
import { within } from '@testing-library/dom';
import App from './App';
-import { testData as data, testDataWithFourQuestions } from './static/data';
+import { testData as data } from './static/data';
import { translationsProvider } from './util';
const answerQuestionCorrectly = async (user: UserEvent) => {
@@ -114,16 +114,16 @@ describe('App component', () => {
expect(result).toBeInTheDocument();
});
- it('shows the result page after answering a quick set of questions', async () => {
+ it('shows the result page after answering all questions', async () => {
const user = userEvent.setup();
- render(, {
+ const testDataWith1Question = data.slice(0, 1);
+ render(, {
wrapper: translationsProvider,
});
- const button = screen.getByText(/Quick set/i);
+ const button = screen.getByText(/Complete set/i);
await user.click(button);
- // Quick set only contains one question
// We conduct the quiz with exactly one question
// To test if the App respects the number of questions
const numberOfQuestions = 1;
@@ -194,16 +194,57 @@ describe('App component', () => {
});
});
+ describe('quiz sets', () => {
+ it('has 4 available sets when the quiz has more than 50 questions', () => {
+ const testDataWith52Questions = data.flatMap((item) =>
+ Array(13).fill(item),
+ );
+ render(, {
+ wrapper: translationsProvider,
+ });
+
+ const completeSet = screen.getByRole('button', {
+ name: /Complete set/i,
+ });
+ const largeSet = screen.getByRole('button', { name: /Large set/i });
+ const mediumSet = screen.getByRole('button', { name: /Medium set/i });
+ const quickSet = screen.getByRole('button', { name: /Quick set/i });
+ expect(completeSet).toBeInTheDocument();
+ expect(largeSet).toBeInTheDocument();
+ expect(mediumSet).toBeInTheDocument();
+ expect(quickSet).toBeInTheDocument();
+ });
+
+ it('does not show any set with more questions than the complete one', () => {
+ const testDataWith16Questions = data.flatMap((item) =>
+ Array(4).fill(item),
+ );
+ render(, {
+ wrapper: translationsProvider,
+ });
+
+ const completeSet = screen.getByRole('button', {
+ name: /Complete set/i,
+ });
+ const largeSet = screen.queryByRole('button', { name: /Large set/i });
+ const mediumSet = screen.queryByRole('button', { name: /Medium set/i });
+ const quickSet = screen.getByRole('button', { name: /Quick set/i });
+ expect(completeSet).toBeInTheDocument();
+ expect(largeSet).not.toBeInTheDocument();
+ expect(mediumSet).not.toBeInTheDocument();
+ expect(quickSet).toBeInTheDocument();
+ });
+ });
+
describe('multiple attempts feature', () => {
it('shows a wrongly answered question again up to 3 times', async () => {
const user = userEvent.setup();
-
- render(, {
+ const testDataWith1Question = data.slice(0, 1);
+ render(, {
wrapper: translationsProvider,
});
- // A quick set of a test with four questions contains 1 question
- const button = screen.getByText(/Quick set/i);
+ const button = screen.getByText(/Complete set/i);
await user.click(button);
// Answer wrongly 3 times
@@ -219,14 +260,14 @@ describe('App component', () => {
it('shows the attempts needed for each question', async () => {
const user = userEvent.setup();
- render(, {
+ const testDataWith2Questions = data.slice(0, 2);
+ render(, {
wrapper: translationsProvider,
});
- const button = screen.getByText(/Medium set/i);
+ const button = screen.getByText(/Complete set/i);
await user.click(button);
- // A medium set of a test with four questions contains 2 questions
let indexTextEl = screen.getByText('1 of 2');
expect(indexTextEl).toBeInTheDocument();
@@ -268,14 +309,14 @@ describe('App component', () => {
it('displays the quiz progress', async () => {
const user = userEvent.setup();
- render(, {
+ const testDataWith2Questions = data.slice(0, 2);
+ render(, {
wrapper: translationsProvider,
});
- const button = screen.getByText(/Medium set/i);
+ const button = screen.getByText(/Complete set/i);
await user.click(button);
- // A medium set of a test with four questions contains 2 questions
let indexTextEl = screen.getByText('1 of 2');
for (let i = 0; i < 5; i++) {
@@ -292,13 +333,12 @@ describe('App component', () => {
it('displays the remaining attempts after wrongly answering a question', async () => {
const user = userEvent.setup();
-
- render(, {
+ const testDataWith1Question = data.slice(0, 1);
+ render(, {
wrapper: translationsProvider,
});
- // A quick set of a test with four questions contains 1 question
- const button = screen.getByText(/Quick set/i);
+ const button = screen.getByText(/Complete set/i);
await user.click(button);
for (let i = 0; i < 2; i++) {
diff --git a/src/App.tsx b/src/App.tsx
index 0d5cc5c..882216d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -30,9 +30,28 @@ function App({ data, locale = 'en' }: { data: Data; locale?: string }) {
setQuestions(getRandomSet(data, questionsCount));
};
- const completeSet = data.length;
- const mediumSet = Math.ceil(completeSet / 2);
- const quickSet = Math.ceil(completeSet / 5);
+ const completeSet = {
+ text: t('app.completeBtn', { count: data.length }),
+ count: data.length,
+ };
+ const largeSet = {
+ text: t('app.largeBtn', { count: 50 }),
+ count: 50,
+ };
+ const mediumSet = {
+ text: t('app.mediumBtn', { count: 20 }),
+ count: 20,
+ };
+ const quickSet = {
+ text: t('app.quickBtn', { count: 10 }),
+ count: 10,
+ };
+
+ const fixedSets = [quickSet, mediumSet, largeSet].filter(
+ (set) => set.count < completeSet.count,
+ );
+
+ const buttons = [...fixedSets, completeSet];
return (
{t('app.intro')}
{t('app.instructions')}
- -
-
- -
-
- -
-
+ {buttons.map((button, i) => (
+ -
+
+ ))}
>
)}
diff --git a/src/locales/de.ts b/src/locales/de.ts
index 215ad84..dd88492 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -7,6 +7,8 @@ const de = {
instructions: 'Wählen Sie die Anzahl der Fragen aus die Sie üben möchten:',
completeBtn_one: 'Komplettes Set ({{count}} Frage)',
completeBtn_other: 'Komplettes Set (alle {{count}} Fragen)',
+ largeBtn_one: 'Großes Set ({{count}} Frage)',
+ largeBtn_other: 'Großes Set ({{count}} Fragen)',
mediumBtn_one: 'Mittleres Set ({{count}} Frage)',
mediumBtn_other: 'Mittleres Set ({{count}} Fragen)',
quickBtn_one: 'Schnelles Set ({{count}} Frage)',
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 4fdbd15..9e52a17 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -8,6 +8,8 @@ const en = {
'Choose a quiz type below depending on how many questions you want to practice.',
completeBtn_one: 'Complete set ({{count}} question)',
completeBtn_other: 'Complete set ({{count}} questions)',
+ largeBtn_one: 'Large set ({{count}} question)',
+ largeBtn_other: 'Large set ({{count}} questions)',
mediumBtn_one: 'Medium set ({{count}} question)',
mediumBtn_other: 'Medium set ({{count}} questions)',
quickBtn_one: 'Quick set ({{count}} question)',
diff --git a/src/static/data.ts b/src/static/data.ts
index 48ddc70..289c445 100644
--- a/src/static/data.ts
+++ b/src/static/data.ts
@@ -192,103 +192,6 @@ export const testData: Data = [
type: QuestionTypes.SingleChoice,
text: 'What is the answer?',
referenceLink: 'https://www.example.com',
- courseId: 'courseId-01',
- quizId: 'quizId-01',
- answers: [
- {
- id: 'answer_01',
- correct: true,
- text: 'Correct Answer',
- },
- {
- id: 'answer_02',
- correct: false,
- text: 'Answer 2',
- },
- ],
- },
- {
- id: 'id-02',
- type: QuestionTypes.SingleChoice,
- text: 'What is the answer?',
- courseId: 'courseId-01',
- quizId: 'quizId-02',
- answers: [
- {
- id: 'answer_03',
- correct: true,
- text: 'Correct Answer',
- },
- {
- id: 'answer_04',
- correct: false,
- text: 'Answer 4',
- },
- ],
- },
- {
- id: 'id-03',
- type: QuestionTypes.MultipleChoice,
- text: 'What is the answer?',
- answers: [
- {
- id: 'answer_05',
- correct: true,
- text: 'Correct Answer',
- },
- {
- id: 'answer_06',
- correct: false,
- text: 'Answer 6',
- },
- {
- id: 'answer_07',
- correct: true,
- text: 'Correct Answer',
- },
- {
- id: 'answer_08',
- correct: false,
- text: 'Answer 8',
- },
- ],
- },
- {
- id: 'id-04',
- type: QuestionTypes.MultipleChoice,
- text: 'What is the answer?',
- answers: [
- {
- id: 'answer_09',
- correct: false,
- text: 'Answer 9',
- },
- {
- id: 'answer_10',
- correct: false,
- text: 'Answer 10',
- },
- {
- id: 'answer_11',
- correct: false,
- text: 'Answer 11',
- },
- {
- id: 'answer_12',
- correct: false,
- text: 'Answer 12',
- },
- ],
- },
-] as Data;
-
-export const testDataWithFourQuestions: Data = [
- {
- id: 'id-01',
- type: QuestionTypes.SingleChoice,
- text: 'Q1: What is the answer?',
- courseId: 'courseId-01',
- quizId: 'quizId-01',
answers: [
{
id: 'answer_01',
@@ -305,9 +208,7 @@ export const testDataWithFourQuestions: Data = [
{
id: 'id-02',
type: QuestionTypes.SingleChoice,
- text: 'Q2: What is the answer?',
- courseId: 'courseId-01',
- quizId: 'quizId-02',
+ text: 'What is the answer?',
answers: [
{
id: 'answer_03',
@@ -324,7 +225,7 @@ export const testDataWithFourQuestions: Data = [
{
id: 'id-03',
type: QuestionTypes.MultipleChoice,
- text: 'Q3: What is the answer?',
+ text: 'What is the answer?',
answers: [
{
id: 'answer_05',
@@ -351,7 +252,7 @@ export const testDataWithFourQuestions: Data = [
{
id: 'id-04',
type: QuestionTypes.MultipleChoice,
- text: 'Q4: What is the answer?',
+ text: 'What is the answer?',
answers: [
{
id: 'answer_09',