@@ -45,6 +45,7 @@ import {interrupt, runCode, terminalRef} from "./RunCode";
4545import firebase from "firebase/app" ;
4646import { TableOfContents } from "./TableOfContents" ;
4747import HeaderLoginInfo from "./components/HeaderLoginInfo" ;
48+ import * as terms from "./terms.json"
4849
4950
5051const EditorButtons = (
@@ -64,15 +65,15 @@ const EditorButtons = (
6465className = "btn btn-danger"
6566onClick = { ( ) => interrupt ( ) }
6667>
67- < FontAwesomeIcon icon = { faStop } /> Stop
68+ < FontAwesomeIcon icon = { faStop } /> { terms . stop }
6869</ button >
6970 :
7071< button
7172disabled = { disabled }
7273className = "btn btn-primary"
7374onClick = { ( ) => runCode ( { source :"editor" } ) }
7475>
75- < FontAwesomeIcon icon = { faPlay } /> Run
76+ < FontAwesomeIcon icon = { faPlay } /> { terms . run }
7677</ button >
7778}
7879
@@ -144,7 +145,7 @@ const EditorButtons = (
144145{ showQuestionButton && ! disabled &&
145146< a className = "btn btn-success"
146147href = { "#question" } >
147- < FontAwesomeIcon icon = { faQuestionCircle } /> Ask for help
148+ < FontAwesomeIcon icon = { faQuestionCircle } /> { terms . ask_for_help }
148149</ a > }
149150</ div > ;
150151
@@ -200,42 +201,11 @@ const QuestionWizard = (
200201 expectedOutput,
201202} ) =>
202203< >
203- < h1 > Question Wizard</ h1 >
204- < p >
205- If you need help, there are many sites like
206- { " " } < a target = "_blank" rel = "noreferrer" href = "https://stackoverflow.com/" > Stack Overflow</ a > { " " }
207- and< a target = "_blank" rel = "noreferrer" href = "https://www.reddit.com/r/learnpython/" > reddit</ a > where
208- you can ask questions.
209- This is a tool to help you write a good quality question that is likely to get answers.
210- </ p >
211- < p >
212- Enter and run your code on the right. If you don't have any code because you don't know where to get started,
213- I'm afraid this tool can't help you. You can still ask for help, but it might be good to first
214- read< a target = "_blank" rel = "noreferrer"
215- href = "https://stackoverflow.com/help/dont-ask" > What types of questions should I avoid asking?</ a >
216- </ p >
217- < p >
218- If your question is about servers (e.g. Django or Flask), web requests, databases, or a package that can't be
219- imported here, then this tool won't work. However, just because your current code< em > involves</ em > those things,
220- that doesn't mean that's what your question is< em > about</ em > . If you're having a general
221- Python/programming/logic problem, then extract that problem from the other stuff.
222- Python with Django is still Python. If you can't do that, then
223- read< a target = "_blank" rel = "noreferrer"
224- href = "https://stackoverflow.com/help/minimal-reproducible-example" >
225- How to create a Minimal, Reproducible Example</ a > before
226- asking your question.
227- </ p >
204+ < h1 > { terms . question_wizard } </ h1 >
205+ < div dangerouslySetInnerHTML = { { __html :terms . question_wizard_intro } } />
228206< hr />
229207{ requestExpectedOutput && < >
230- < p >
231- Good, now enter the output you expect/want from your program below.
232- What would it show if it worked correctly?
233- If it's not supposed to output anything, then add some< code > print()</ code > calls to your
234- code so that it would output something useful.
235- </ p >
236- < p >
237- When you're done, click 'Run' again to generate your question.
238- </ p >
208+ < div dangerouslySetInnerHTML = { { __html :terms . question_wizard_expected_output } } />
239209< AceEditor
240210onChange = { value => bookSetState ( "questionWizard.expectedOutput" , value ) }
241211theme = { "monokai" }
@@ -273,10 +243,10 @@ const Markdown = (
273243onClick = { ( event ) => {
274244// https://stackoverflow.com/questions/54109790/how-to-add-onclick-event-to-a-string-rendered-by-dangerouslysetinnerhtml-in-reac
275245const button = event . target . closest ( "button" ) ;
276- if ( button && event . currentTarget . contains ( button ) && button . textContent === "Copy" ) {
246+ if ( button && event . currentTarget . contains ( button ) && button . classList . contains ( "copy-button" ) ) {
277247const codeElement = button . closest ( "code" ) ;
278248let codeText = codeElement . textContent ;
279- codeText = codeText . substring ( 0 , codeText . length - "\nCopy" . length ) ;
249+ codeText = codeText . substring ( 0 , codeText . length - 1 - button . textContent . length ) ;
280250copyFunc ( codeText ) ;
281251}
282252} }
@@ -309,13 +279,13 @@ const CourseText = (
309279{ page . index > 0 &&
310280< button className = "btn btn-primary previous-button"
311281onClick = { ( ) => movePage ( - 1 ) } >
312- Previous
282+ { terms . previous }
313283</ button > }
314284{ " " }
315285{ page . index < Object . keys ( pages ) . length - 1 && step_index === page . steps . length - 1 &&
316286< button className = "btn btn-success next-button"
317287onClick = { ( ) => movePage ( + 1 ) } >
318- Next
288+ { terms . next }
319289</ button > }
320290</ div >
321291< br />
@@ -377,7 +347,7 @@ class AppComponent extends React.Component {
377347< HeaderLoginInfo email = { user . email } />
378348</ span >
379349< a className = "nav-item nav-link" href = "#toc" >
380- < FontAwesomeIcon icon = { faListOl } /> Table of Contents
350+ < FontAwesomeIcon icon = { faListOl } /> { terms . table_of_contents }
381351</ a >
382352</ nav >
383353
@@ -448,9 +418,9 @@ const StepButton = ({delta, label}) =>
448418
449419const StepButtons = ( ) =>
450420< div style = { { position :"fixed" , bottom :0 } } >
451- < StepButton delta = { - 1 } label = "Reverse step" />
421+ < StepButton delta = { - 1 } label = { terms . reverse_step } />
452422{ " " }
453- < StepButton delta = { + 1 } label = "Skip step" />
423+ < StepButton delta = { + 1 } label = { terms . skip_step } />
454424</ div >
455425
456426
@@ -462,21 +432,22 @@ const MenuPopup = ({user}) =>
462432</ button > }
463433>
464434{ close => < div className = "menu-popup" >
465- < p > < button
466- className = "btn btn-danger"
467- onClick = { ( ) => {
468- close ( ) ;
469- bookSetState ( "user.uid" , null )
470- firebase . auth ( ) . signOut ( ) ;
471- } }
472- >
473- < FontAwesomeIcon icon = { faSignOutAlt } /> Sign out
474- </ button > </ p >
435+ < p >
436+ < button
437+ className = "btn btn-danger"
438+ onClick = { ( ) => {
439+ close ( ) ;
440+ bookSetState ( "user.uid" , null )
441+ firebase . auth ( ) . signOut ( ) ;
442+ } }
443+ >
444+ < FontAwesomeIcon icon = { faSignOutAlt } /> { terms . sign_out }
445+ </ button > </ p >
475446< p >
476447< Popup
477448trigger = {
478449< button className = "btn btn-primary" >
479- < FontAwesomeIcon icon = { faCog } /> Settings
450+ < FontAwesomeIcon icon = { faCog } /> { terms . settings }
480451</ button >
481452}
482453modal
@@ -489,7 +460,7 @@ const MenuPopup = ({user}) =>
489460< Popup
490461trigger = {
491462< button className = "btn btn-success" >
492- < FontAwesomeIcon icon = { faBug } /> Feedback
463+ < FontAwesomeIcon icon = { faBug } /> { terms . feedback }
493464</ button >
494465}
495466modal
@@ -505,17 +476,17 @@ const MenuPopup = ({user}) =>
505476
506477const SettingsModal = ( { user} ) => (
507478< div className = "settings-modal" >
508- < h1 > Settings </ h1 >
479+ < h1 > { terms . settings } </ h1 >
509480< br />
510481< label >
511482< Toggle
512483defaultChecked = { user . developerMode }
513484onChange = { ( e ) => setDeveloperMode ( e . target . checked ) }
514485/>
515- < b > Developer mode </ b >
486+ < b > { terms . developer_mode } </ b >
516487</ label >
517488
518- < p > Enables the "Reverse step" and "Skip step" buttons. </ p >
489+ < p > { terms . developer_mode_description } </ p >
519490</ div >
520491)
521492
@@ -531,22 +502,7 @@ const checkCopy = () => {
531502] )
532503. some ( ( node ) => node && ! node . classList . contains ( "copyable" ) )
533504) {
534- addMessage ( `
535- <div>
536- <p><strong>STOP!</strong></p>
537- <p>
538- Try to avoid copy pasting code. You will learn, absorb, and remember better if you
539- type in the code yourself.
540- </p>
541- <p>
542- When copying is appropriate, there will be a button to click to make it easy.
543- If there's no button, try typing.
544- </p>
545- <p>
546- Having said that, we're not going to force you. Copy if you really want to.
547- </p>
548- </div>
549- ` ) ;
505+ addMessage ( terms . copy_warning ) ;
550506}
551507}
552508