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')}

)} 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',