Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit2b968cf

Browse files
authored
Merge pull requestcoderoad#365 from coderoad/feature/hints
Feature/hints
2 parents16dbc6c +4d532de commit2b968cf

File tree

5 files changed

+69
-1
lines changed

5 files changed

+69
-1
lines changed

‎typings/tutorial.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export type Step = {
2828
setup:StepActions
2929
solution:Maybe<StepActions>
3030
subtasks?:{[testName:string]:boolean}
31+
hints?:string[]
3132
}
3233

3334
/** A tutorial for use in VSCode CodeRoad */
@@ -61,7 +62,7 @@ export interface TestRunnerArgs {
6162

6263
exportinterfaceTestRunnerConfig{
6364
command:string
64-
args?:TestRunnerArgs
65+
args:TestRunnerArgs
6566
path?:string// deprecated
6667
directory?:string
6768
actions?:StepActions// deprecated
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import*asReactfrom'react'
2+
importMarkdownfrom'../../../components/Markdown'
3+
importButtonfrom'../../../components/Button'
4+
5+
conststyles={
6+
hints:{
7+
marginTop:'1rem',
8+
},
9+
hintList:{
10+
marginBottom:'0.5rem',
11+
},
12+
hint:{
13+
margin:'0.5rem 0',
14+
backgroundColor:'rgba(255,229,100,0.3)',
15+
borderLeft:'#ffe564',
16+
padding:'0.5rem',
17+
},
18+
}
19+
20+
interfaceProps{
21+
hints:string[]
22+
}
23+
24+
constHints=(props:Props)=>{
25+
const[hintIndex,setHintIndex]=React.useState(-1)
26+
constisFinalHint=props.hints.length-1===hintIndex
27+
constnextHint=()=>{
28+
if(!isFinalHint){
29+
setHintIndex((currentHintIndex)=>currentHintIndex+1)
30+
}
31+
}
32+
return(
33+
<divstyle={styles.hints}>
34+
<divstyle={styles.hintList}>
35+
{props.hints.map((h,i)=>{
36+
returni<=hintIndex ?(
37+
<divkey={i}style={styles.hint}>
38+
<Markdown>{h}</Markdown>
39+
</div>
40+
) :null
41+
})}
42+
</div>
43+
<ButtononClick={nextHint}disabled={isFinalHint}>
44+
Get A Hint
45+
</Button>
46+
</div>
47+
)
48+
}
49+
50+
exportdefaultHints

‎web-app/src/containers/Tutorial/components/Level.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,7 @@ const Level = ({
173173
content={step.content}
174174
onLoadSolution={onLoadSolution}
175175
subtasks={subtasks}
176+
hints={step.hints}
176177
/>
177178
)
178179
})}

‎web-app/src/containers/Tutorial/components/Step.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ import * as React from 'react'
22
import*asTfrom'typings'
33
import{css,jsx}from'@emotion/core'
44
importTestStatusIconfrom'./TestStatusIcon'
5+
importHintsfrom'./Hints'
56
importMarkdownfrom'../../../components/Markdown'
67

78
interfaceProps{
89
order:number
910
content:string
1011
status:T.ProgressStatus
1112
subtasks:{name:string;pass:boolean}[]|null
13+
hints?:string[]
1214
onLoadSolution():void
1315
}
1416

@@ -54,9 +56,11 @@ const Step = (props: Props) => {
5456
{props.status==='COMPLETE'&&<TestStatusIconsize="small"checked/>}
5557
</div>
5658
<div>
59+
{/* content */}
5760
<divcss={styles.content}>
5861
<Markdown>{props.content||''}</Markdown>
5962
</div>
63+
{/* subtasks */}
6064
{props.subtasks ?(
6165
<ulcss={styles.subtasks}>
6266
{props.subtasks.map((subtask)=>(
@@ -68,6 +72,8 @@ const Step = (props: Props) => {
6872
))}
6973
</ul>
7074
) :null}
75+
{/* hints */}
76+
{props.hints&&props.hints.length ?<Hintshints={props.hints}/> :null}
7177
</div>
7278
</div>
7379
</div>

‎web-app/stories/Step.stories.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,3 +98,13 @@ storiesOf('Step', module)
9898
]}
9999
/>
100100
))
101+
.add('Hints',()=>(
102+
<Step
103+
order={1}
104+
content={text('text',stepText)}
105+
status="ACTIVE"
106+
onLoadSolution={action('onLoadSolution')}
107+
subtasks={null}
108+
hints={['First hint!','Second hint!']}
109+
/>
110+
))

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp