Jun 16, 2020 · Jun 15, 2020 · Jun 15, 2020 · Jun 15, 2020 · Jun 15, 2020
diff --git a/typings/tutorial.d.ts b/typings/tutorial.d.ts
  setup: StepActions
  solution: Maybe<StepActions>
  subtasks?: { [testName: string]: boolean }
  hints?: string[]
 }

 /** A tutorial for use in VSCode CodeRoad */

 export interface TestRunnerConfig {
  command: string
  args?: TestRunnerArgs
  args: TestRunnerArgs
  path?: string // deprecated
  directory?: string
  actions?: StepActions // deprecated
diff --git a/web-app/src/containers/Tutorial/components/Hints.tsx b/web-app/src/containers/Tutorial/components/Hints.tsx
 import * as React from 'react'
 import Markdown from '../../../components/Markdown'
 import Button from '../../../components/Button'

 const styles = {
  hints: {
    marginTop: '1rem',
  },
  hintList: {
    marginBottom: '0.5rem',
  },
  hint: {
    margin: '0.5rem 0',
    backgroundColor: 'rgba(255,229,100,0.3)',
    borderLeft: '#ffe564',
    padding: '0.5rem',
  },
 }

 interface Props {
  hints: string[]
 }

 const Hints = (props: Props) => {
  const [hintIndex, setHintIndex] = React.useState(-1)
  const isFinalHint = props.hints.length - 1 === hintIndex
  const nextHint = () => {
    if (!isFinalHint) {
      setHintIndex((currentHintIndex) => currentHintIndex + 1)
    }
  }
  return (
    <div style={styles.hints}>
      <div style={styles.hintList}>
        {props.hints.map((h, i) => {
          return i <= hintIndex ? (
            <div key={i} style={styles.hint}>
              <Markdown>{h}</Markdown>
            </div>
          ) : null
        })}
      </div>
      <Button onClick={nextHint} disabled={isFinalHint}>
        Get A Hint
      </Button>
    </div>
  )
 }

 export default Hints
diff --git a/web-app/src/containers/Tutorial/components/Level.tsx b/web-app/src/containers/Tutorial/components/Level.tsx
                    content={step.content}
                    onLoadSolution={onLoadSolution}
                    subtasks={subtasks}
                    hints={step.hints}
                  />
                )
              })}
diff --git a/web-app/src/containers/Tutorial/components/Step.tsx b/web-app/src/containers/Tutorial/components/Step.tsx
 import * as T from 'typings'
 import { css, jsx } from '@emotion/core'
 import TestStatusIcon from './TestStatusIcon'
 import Hints from './Hints'
 import Markdown from '../../../components/Markdown'

 interface Props {
  order: number
  content: string
  status: T.ProgressStatus
  subtasks: { name: string; pass: boolean }[] | null
  hints?: string[]
  onLoadSolution(): void
 }

          {props.status === 'COMPLETE' && <TestStatusIcon size="small" checked />}
        </div>
        <div>
          {/* content */}
          <div css={styles.content}>
            <Markdown>{props.content || ''}</Markdown>
          </div>
          {/* subtasks */}
          {props.subtasks ? (
            <ul css={styles.subtasks}>
              {props.subtasks.map((subtask) => (
              ))}
            </ul>
          ) : null}
          {/* hints */}
          {props.hints && props.hints.length ? <Hints hints={props.hints} /> : null}
        </div>
      </div>
    </div>
diff --git a/web-app/stories/Step.stories.tsx b/web-app/stories/Step.stories.tsx
      ]}
    />
  ))
  .add('Hints', () => (
    <Step
      order={1}
      content={text('text', stepText)}
      status="ACTIVE"
      onLoadSolution={action('onLoadSolution')}
      subtasks={null}
      hints={['First hint!', 'Second hint!']}
    />
  ))
Original file line number	Diff line number	Diff line change
Expand Up		@@ -28,6 +28,7 @@ export type Step = {
		setup: StepActions
		solution: Maybe<StepActions>
		subtasks?: { [testName: string]: boolean }
		hints?: string[]
		}

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

		export interface TestRunnerConfig {
		command: string
		args?: TestRunnerArgs
		args: TestRunnerArgs
		path?: string // deprecated
		directory?: string
		actions?: StepActions // deprecated
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,50 @@
		import * as React from 'react'
		import Markdown from '../../../components/Markdown'
		import Button from '../../../components/Button'

		const styles = {
		hints: {
		marginTop: '1rem',
		},
		hintList: {
		marginBottom: '0.5rem',
		},
		hint: {
		margin: '0.5rem 0',
		backgroundColor: 'rgba(255,229,100,0.3)',
		borderLeft: '#ffe564',
		padding: '0.5rem',
		},
		}

		interface Props {
		hints: string[]
		}

		const Hints = (props: Props) => {
		const [hintIndex, setHintIndex] = React.useState(-1)
		const isFinalHint = props.hints.length - 1 === hintIndex
		const nextHint = () => {
		if (!isFinalHint) {
		setHintIndex((currentHintIndex) => currentHintIndex + 1)
		}
		}
		return (
		<div style={styles.hints}>
		<div style={styles.hintList}>
		{props.hints.map((h, i) => {
		return i <= hintIndex ? (
		<div key={i} style={styles.hint}>
		<Markdown>{h}</Markdown>
		</div>
		) : null
		})}
		</div>
		<Button onClick={nextHint} disabled={isFinalHint}>
		Get A Hint
		</Button>
		</div>
		)
		}

		export default Hints
Original file line number	Diff line number	Diff line change
Expand Up		@@ -173,6 +173,7 @@ const Level = ({
		content={step.content}
		onLoadSolution={onLoadSolution}
		subtasks={subtasks}
		hints={step.hints}
		/>
		)
		})}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,13 +2,15 @@ import * as React from 'react'
		import * as T from 'typings'
		import { css, jsx } from '@emotion/core'
		import TestStatusIcon from './TestStatusIcon'
		import Hints from './Hints'
		import Markdown from '../../../components/Markdown'

		interface Props {
		order: number
		content: string
		status: T.ProgressStatus
		subtasks: { name: string; pass: boolean }[] \| null
		hints?: string[]
		onLoadSolution(): void
		}

Expand DownExpand Up		@@ -54,9 +56,11 @@ const Step = (props: Props) => {
		{props.status === 'COMPLETE' && <TestStatusIcon size="small" checked />}
		</div>
		<div>
		{/* content */}
		<div css={styles.content}>
		<Markdown>{props.content \|\| ''}</Markdown>
		</div>
		{/* subtasks */}
		{props.subtasks ? (
		<ul css={styles.subtasks}>
		{props.subtasks.map((subtask) => (
Expand All		@@ -68,6 +72,8 @@ const Step = (props: Props) => {
		))}
		</ul>
		) : null}
		{/* hints */}
		{props.hints && props.hints.length ? <Hints hints={props.hints} /> : null}
		</div>
		</div>
		</div>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -98,3 +98,13 @@ storiesOf('Step', module)
		]}
		/>
		))
		.add('Hints', () => (
		<Step
		order={1}
		content={text('text', stepText)}
		status="ACTIVE"
		onLoadSolution={action('onLoadSolution')}
		subtasks={null}
		hints={['First hint!', 'Second hint!']}
		/>
		))