jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-04-30 16:01:14 -04:00
Code Issues Projects Releases Wiki Activity

feat(learn): Added keyboard shortcut(ctrl+enter) to check your answer button (#61333)

Browse Source 
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Tanmay Gautam
2025-08-20 09:49:39 +05:30
committed by GitHub
parent 806b7380ae
commit 53a648f71c
2 changed files with 90 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/templates/Challenges/generic/show.tsx
View File

@@ -7,6 +7,7 @@ import { Container, Col, Row, Button, Spacer } from '@freecodecamp/ui';
import { isEqual } from 'lodash';
import store from 'store';
import { YouTubeEvent } from 'react-youtube';
import { ObserveKeys } from 'react-hotkeys';
// Local Utilities
import LearnLayout from '../../../components/layouts/learn';
@@ -259,21 +260,25 @@ const ShowGeneric = ({
)}
{assignments.length > 0 && (
<Assignments
assignments={assignments}
allAssignmentsCompleted={allAssignmentsCompleted}
handleAssignmentChange={handleAssignmentChange}
/>
<ObserveKeys only={['ctrl', 'cmd', 'enter']}>
<Assignments
assignments={assignments}
allAssignmentsCompleted={allAssignmentsCompleted}
handleAssignmentChange={handleAssignmentChange}
/>
</ObserveKeys>
)}
{questions.length > 0 && (
<MultipleChoiceQuestions
questions={questions}
selectedOptions={selectedMcqOptions}
handleOptionChange={handleMcqOptionChange}
submittedMcqAnswers={submittedMcqAnswers}
showFeedback={showFeedback}
/>
<ObserveKeys only={['ctrl', 'cmd', 'enter']}>
<MultipleChoiceQuestions
questions={questions}
selectedOptions={selectedMcqOptions}
handleOptionChange={handleMcqOptionChange}
submittedMcqAnswers={submittedMcqAnswers}
showFeedback={showFeedback}
/>
</ObserveKeys>
)}
{explanation ? (

74
e2e/hotkeys.spec.ts
View File

@@ -21,7 +21,11 @@ const links = {
video1:
'/learn/python-for-everybody/python-for-everybody/introduction-why-program',
video2:
'/learn/python-for-everybody/python-for-everybody/introduction-hardware-architecture'
'/learn/python-for-everybody/python-for-everybody/introduction-hardware-architecture',
multipleChoiceQuestion:
'/learn/a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/task-7',
assignment:
'/learn/full-stack-developer/review-semantic-html/review-semantic-html'
};
const titles = {
@@ -143,3 +147,71 @@ test('User can use shortcuts to navigate between video-based challenges', async
await page.keyboard.press('p');
await page.waitForURL(links.video1);
});
test('User can use Ctrl+Enter to submit their answer in a multiple-choice question challenge', async ({
page
}) => {
await page.goto(links.multipleChoiceQuestion);
// Wait for page load
await expect(page.getByRole('heading', { name: 'Task 7' })).toBeVisible();
await page.keyboard.press('Control+Enter');
await expect(
page.getByText('You have unanswered questions and/or incorrect answers.')
).toBeVisible();
});
test('User can use Cmd+Enter to submit their answer in a multiple-choice question challenge', async ({
page
}) => {
await page.goto(links.multipleChoiceQuestion);
// Wait for page load
await expect(page.getByRole('heading', { name: 'Task 7' })).toBeVisible();
await page.keyboard.press('Meta+Enter');
await expect(
page.getByText('You have unanswered questions and/or incorrect answers.')
).toBeVisible();
});
test('User can use Ctrl+Enter to submit their answer in an assignment-type challenge', async ({
page
}) => {
await page.goto(links.assignment);
// Wait for page load
await expect(
page.getByRole('heading', { name: 'Semantic HTML Review' })
).toBeVisible();
// Check the assignment checkbox
await page.getByRole('checkbox').check();
await page.keyboard.press('Control+Enter');
// Completion modal shows up
await expect(page.getByRole('dialog')).toBeVisible();
});
test('User can use Cmd+Enter to submit their answer in an assignment-type challenge', async ({
page
}) => {
await page.goto(links.assignment);
// Wait for page load
await expect(
page.getByRole('heading', { name: 'Semantic HTML Review' })
).toBeVisible();
// Check the assignment checkbox
await page.getByRole('checkbox').check();
await page.keyboard.press('Meta+Enter');
// Completion modal shows up
await expect(page.getByRole('dialog')).toBeVisible();
});