gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: allow ctrl+enter to submit video lessons (#38898)

Browse Source 
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Tom
2020-05-26 08:47:36 -05:00
committed by Mrugesh Mohapatra
parent 74430b3ec3
commit 911ba72106
1 changed files with 31 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
client/src/templates/Challenges/video/Show.js
View File

@ -8,6 +8,7 @@ import { graphql } from 'gatsby';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import YouTube from 'react-youtube'; import YouTube from 'react-youtube';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { ObserveKeys } from 'react-hotkeys';
// Local Utilities // Local Utilities
import PrismFormatted from '../components/PrismFormatted'; import PrismFormatted from '../components/PrismFormatted';
@ -165,6 +166,9 @@ export class Project extends Component {
const blockNameTitle = `${blockName} - ${title}`; const blockNameTitle = `${blockName} - ${title}`;
return ( return (
<Hotkeys <Hotkeys
executeChallenge={() => {
this.handleSubmit(solution, openCompletionModal);
}}
innerRef={c => (this._container = c)} innerRef={c => (this._container = c)}
introPath={introPath} introPath={introPath}
nextChallengePath={nextChallengePath} nextChallengePath={nextChallengePath}
@ -213,29 +217,33 @@ export class Project extends Component {
<ChallengeDescription description={description} /> <ChallengeDescription description={description} />
<PrismFormatted text={text} /> <PrismFormatted text={text} />
<Spacer /> <Spacer />
<div className='video-quiz-options'> <ObserveKeys>
{answers.map((option, index) => ( <div className='video-quiz-options'>
<label className='video-quiz-option-label'> {answers.map((option, index) => (
<input // answers are static and have no natural id property, so
checked={this.state.selectedOption === index} // index should be fine as a key:
className='video-quiz-input-hidden' <label className='video-quiz-option-label' key={index}>
name='quiz' <input
onChange={this.handleOptionChange} checked={this.state.selectedOption === index}
type='radio' className='video-quiz-input-hidden'
value={index} name='quiz'
/>{' '} onChange={this.handleOptionChange}
<span className='video-quiz-input-visible'> type='radio'
{this.state.selectedOption === index ? ( value={index}
<span className='video-quiz-selected-input'></span> />{' '}
) : null} <span className='video-quiz-input-visible'>
</span> {this.state.selectedOption === index ? (
<PrismFormatted <span className='video-quiz-selected-input'></span>
className={'video-quiz-option'} ) : null}
text={option} </span>
/> <PrismFormatted
</label> className={'video-quiz-option'}
))} text={option}
</div> />
</label>
))}
</div>
</ObserveKeys>
<Spacer /> <Spacer />
<div <div
style={{ style={{