diff --git a/src/actions/tutorialActions.js b/src/actions/tutorialActions.js index edf070c..147c97b 100644 --- a/src/actions/tutorialActions.js +++ b/src/actions/tutorialActions.js @@ -1,4 +1,4 @@ -import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_LEVEL } from './types'; +import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from './types'; export const tutorialChange = () => (dispatch) => { dispatch({ @@ -30,13 +30,6 @@ export const storeTutorialXml = (code) => (dispatch, getState) => { } }; -// level = "instruction" or "assessment" -export const setTutorialLevel = (level) => (dispatch) => { - dispatch({ - type: TUTORIAL_LEVEL, - payload: level - }); -} export const tutorialId = (id) => (dispatch) => { dispatch({ @@ -44,3 +37,10 @@ export const tutorialId = (id) => (dispatch) => { payload: id }); }; + +export const tutorialStep = (step) => (dispatch) => { + dispatch({ + type: TUTORIAL_STEP, + payload: step + }); +}; diff --git a/src/actions/types.js b/src/actions/types.js index 9d26386..27bd18d 100644 --- a/src/actions/types.js +++ b/src/actions/types.js @@ -12,4 +12,4 @@ export const TUTORIAL_ERROR = 'TUTORIAL_ERROR'; export const TUTORIAL_CHANGE = 'TUTORIAL_CHANGE'; export const TUTORIAL_XML = 'TUTORIAL_XML'; export const TUTORIAL_ID = 'TUTORIAL_ID'; -export const TUTORIAL_LEVEL = 'TUTORIAL_LEVEL'; +export const TUTORIAL_STEP = 'TUTORIAL_STEP'; diff --git a/src/components/Blockly/BlocklyWindow.js b/src/components/Blockly/BlocklyWindow.js index 93a0633..1ee6baa 100644 --- a/src/components/Blockly/BlocklyWindow.js +++ b/src/components/Blockly/BlocklyWindow.js @@ -26,16 +26,18 @@ class BlocklyWindow extends Component { this.props.onChangeWorkspace(event); Blockly.Events.disableOrphans(event); }); + Blockly.svgResize(workspace); } - componentDidUpdate(props) { - if(props.initialXml !== this.props.initialXml){ - // guarantees that the current xml-code (this.props.initialXml) is rendered - const workspace = Blockly.getMainWorkspace(); - workspace.clear(); - Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(this.props.initialXml), workspace); - } - } + // componentDidUpdate(props) { + // const workspace = Blockly.getMainWorkspace(); + // if(props.initialXml !== this.props.initialXml){ + // // guarantees that the current xml-code (this.props.initialXml) is rendered + // workspace.clear(); + // Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(this.props.initialXml), workspace); + // } + // Blockly.svgResize(workspace); + // } render() { return ( diff --git a/src/components/Tutorial/Assessment.js b/src/components/Tutorial/Assessment.js new file mode 100644 index 0000000..be6fe8b --- /dev/null +++ b/src/components/Tutorial/Assessment.js @@ -0,0 +1,53 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; + +import BlocklyWindow from '../Blockly/BlocklyWindow'; +import SolutionCheck from './SolutionCheck'; +import CodeViewer from '../CodeViewer'; + +import Grid from '@material-ui/core/Grid'; +import Card from '@material-ui/core/Card'; +import Typography from '@material-ui/core/Typography'; + +class Assessment extends Component { + + render() { + var currentTutorialId = this.props.currentTutorialId; + var step = this.props.step + return ( +
+ {step.headline} + + + + + + + + Arbeitsauftrag + {step.text1} + +
+ +
+ + +
+ ); + }; +} + +Assessment.propTypes = { + currentTutorialId: PropTypes.number, + status: PropTypes.array.isRequired, + change: PropTypes.number.isRequired +}; + +const mapStateToProps = state => ({ + change: state.tutorial.change, + status: state.tutorial.status, + currentTutorialId: state.tutorial.currentId +}); + +export default connect(mapStateToProps, null)(Assessment); diff --git a/src/components/Tutorial/Instruction.js b/src/components/Tutorial/Instruction.js index bd6a406..83c192a 100644 --- a/src/components/Tutorial/Instruction.js +++ b/src/components/Tutorial/Instruction.js @@ -4,36 +4,35 @@ import { connect } from 'react-redux'; import BlocklyWindow from '../Blockly/BlocklyWindow'; -import { tutorials } from './tutorials'; - import Grid from '@material-ui/core/Grid'; - +import Typography from '@material-ui/core/Typography'; class Instruction extends Component { render() { - var currentTutorialId = this.props.currentTutorialId; + var step = this.props.step; return ( - tutorials[currentTutorialId].instruction ? -
-

{tutorials[currentTutorialId].instruction.description}

- {tutorials[currentTutorialId].instruction.xml ? - - - - +
+ {step.headline} + {step.text1} + {step.hardware && step.hardware.length > 0 ? 'Hardware: todo' : null} + {step.requirements && step.requirements.length > 0 ? 'Voraussetzungen: todo' : null} + {step.xml ? + + + - : null } -
- : null + + : null } +
); }; } diff --git a/src/components/Tutorial/SolutionCheck.js b/src/components/Tutorial/SolutionCheck.js index 6e2eefc..87f65cb 100644 --- a/src/components/Tutorial/SolutionCheck.js +++ b/src/components/Tutorial/SolutionCheck.js @@ -3,11 +3,9 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { tutorialCheck } from '../../actions/tutorialActions'; -import * as Blockly from 'blockly/core'; - import Compile from '../Compile'; -import { tutorials } from './tutorials'; +import tutorials from './tutorials.json'; import { checkXml } from './compareXml'; import { withStyles } from '@material-ui/core/styles'; @@ -49,51 +47,50 @@ class SolutionCheck extends Component { } check = () => { - const workspace = Blockly.getMainWorkspace(); - var msg = checkXml(tutorials[this.props.currentTutorialId].solution, this.props.xml); + const tutorial = tutorials.filter(tutorial => tutorial.id === this.props.currentTutorialId)[0]; + const step = tutorial.steps[this.props.activeStep]; + var msg = checkXml(step.xml, this.props.xml); this.props.tutorialCheck(msg.type); this.setState({ msg, open: true }); } render() { return ( - tutorials[this.props.currentTutorialId].test ? -
- - this.check()} - > - - - - - {this.state.msg.type === 'error' ? 'Fehler' : 'Erfolg'} - - {this.state.msg.text} - {this.state.msg.type === 'success' ? -
- - -
- : null} - - - - - -
- : null + + : null} + + + + + + ); }; } @@ -102,11 +99,13 @@ class SolutionCheck extends Component { SolutionCheck.propTypes = { tutorialCheck: PropTypes.func.isRequired, currentTutorialId: PropTypes.number, + activeStep: PropTypes.number.isRequired, xml: PropTypes.string.isRequired }; const mapStateToProps = state => ({ currentTutorialId: state.tutorial.currentId, + activeStep: state.tutorial.activeStep, xml: state.workspace.code.xml }); diff --git a/src/components/Tutorial/StepperHorizontal.js b/src/components/Tutorial/StepperHorizontal.js index a914956..cd520ae 100644 --- a/src/components/Tutorial/StepperHorizontal.js +++ b/src/components/Tutorial/StepperHorizontal.js @@ -6,7 +6,7 @@ import { withRouter } from 'react-router-dom'; import clsx from 'clsx'; -import { tutorials } from './tutorials'; +import tutorials from './tutorials.json'; import { fade } from '@material-ui/core/styles/colorManipulator'; import { withStyles } from '@material-ui/core/styles'; @@ -56,22 +56,22 @@ class StepperHorizontal extends Component { return (
-
: ''}> -

{tutorials[tutorialId].title}

+

{tutorials.filter(tutorial => tutorial.id === tutorialId)[0].title}

diff --git a/src/components/Tutorial/StepperVertical.js b/src/components/Tutorial/StepperVertical.js index 44187c3..e46041a 100644 --- a/src/components/Tutorial/StepperVertical.js +++ b/src/components/Tutorial/StepperVertical.js @@ -1,17 +1,13 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; +import { tutorialStep } from '../../actions/tutorialActions'; import { withRouter, Link } from 'react-router-dom'; import clsx from 'clsx'; -import { tutorials } from './tutorials'; - -import { fade } from '@material-ui/core/styles/colorManipulator'; import { withStyles } from '@material-ui/core/styles'; -import withWidth, { isWidthUp } from '@material-ui/core/withWidth'; -import Button from '@material-ui/core/Button'; import Stepper from '@material-ui/core/Stepper'; import Step from '@material-ui/core/Step'; import StepLabel from '@material-ui/core/StepLabel'; @@ -26,176 +22,74 @@ const styles = (theme) => ({ borderStyle: `solid`, // borderWidth: '2px', borderRadius: '50%', + borderColor: theme.palette.secondary.main, width: '12px', height: '12px', - margin: '0 auto' - }, - stepIconMedium: { - width: '18px', - height: '18px', + margin: '0 auto', }, stepIconLarge: { width: '24px', height: '24px' }, - stepIconTransparent: { - borderColor: `transparent`, - cursor: 'default' + stepIconActive: { + backgroundColor: theme.palette.secondary.main }, - stepIconSuccess: { - borderColor: theme.palette.primary.main, - }, - stepIconError: { - borderColor: theme.palette.error.dark, - }, - stepIconOther: { - borderColor: theme.palette.secondary.main, - }, - stepIconActiveSuccess: { - backgroundColor: fade(theme.palette.primary.main, 0.6) - }, - stepIconActiveError: { - backgroundColor: fade(theme.palette.error.dark, 0.6) - }, - stepIconActiveOther: { - backgroundColor: fade(theme.palette.secondary.main, 0.6) - }, - progress: { - position: 'absolute', - top: 0, - right: 0, - marginRight: '5px', - width: '3px', - }, - progressForeground: { - backgroundColor: theme.palette.primary.main - }, - progressBackground: { - backgroundColor: fade(theme.palette.primary.main, 0.2), - height: '100%', - borderRadius: '2px' + connector: { + height: '10px', + borderLeft: `3px solid ${theme.palette.primary.main}`, + margin: '5px auto' } }); class StepperVertical extends Component { - constructor(props){ - super(props); - this.state = { - tutorialArray: props.currentTutorialId === 0 ? - tutorials.slice(props.currentTutorialId, props.currentTutorialId+5) - : props.currentTutorialId === 1 ? - tutorials.slice(props.currentTutorialId-1, props.currentTutorialId+4) - : props.currentTutorialId === tutorials.length-1 ? - tutorials.slice(props.currentTutorialId-4, props.currentTutorialId+5) - : props.currentTutorialId === tutorials.length-2 ? - tutorials.slice(props.currentTutorialId-3, props.currentTutorialId+4) - : tutorials.slice(props.currentTutorialId-2, props.currentTutorialId+3), - selectedVerticalTutorialId: props.currentTutorialId - }; + componentDidMount(){ + this.props.tutorialStep(0); } componentDidUpdate(props){ - if(props.currentTutorialId !== this.props.currentTutorialId){ - this.setState({ - tutorialArray: this.props.currentTutorialId === 0 ? - tutorials.slice(this.props.currentTutorialId, this.props.currentTutorialId+5) - : this.props.currentTutorialId === 1 ? - tutorials.slice(this.props.currentTutorialId-1, this.props.currentTutorialId+4) - : this.props.currentTutorialId === tutorials.length-1 ? - tutorials.slice(this.props.currentTutorialId-4, this.props.currentTutorialId+5) - : this.props.currentTutorialId === tutorials.length-2 ? - tutorials.slice(this.props.currentTutorialId-3, this.props.currentTutorialId+4) - : tutorials.slice(this.props.currentTutorialId-2, this.props.currentTutorialId+3), - selectedVerticalTutorialId: this.props.currentTutorialId - }); + if(props.currentTutorialId !== Number(this.props.match.params.tutorialId)){ + this.props.tutorialStep(0); } } - verticalStepper = (step) => { - var newTutorialId = this.state.selectedVerticalTutorialId + step; - var tutorialArray = newTutorialId === 0 ? - tutorials.slice(newTutorialId, newTutorialId+5) - : newTutorialId === 1 ? - tutorials.slice(newTutorialId-1, newTutorialId+4) - : newTutorialId === tutorials.length-1 ? - tutorials.slice(newTutorialId-4, newTutorialId+5) - : newTutorialId === tutorials.length-2 ? - tutorials.slice(newTutorialId-3, newTutorialId+4) - : tutorials.slice(newTutorialId-2, newTutorialId+3); - this.setState({ tutorialArray: tutorialArray, selectedVerticalTutorialId: newTutorialId }); - } - render() { - var tutorialId = this.props.currentTutorialId; - var selectedVerticalTutorialId = this.state.selectedVerticalTutorialId; + var steps = this.props.steps; + var activeStep = this.props.activeStep; return ( - isWidthUp('sm', this.props.width) ? -
- -
-
-
-
-
-
-
-
} - classes={{root: this.props.classes.verticalStepper}} - > - {this.state.tutorialArray.map((tutorial, i) => { - var index = this.state.tutorialArray.indexOf(tutorials[selectedVerticalTutorialId]); - var verticalTutorialId = i === index ? selectedVerticalTutorialId+1 : selectedVerticalTutorialId+1 - index + i; - var tutorialStatus = this.props.status[verticalTutorialId-1].status === 'success' ? 'Success' : - this.props.status[verticalTutorialId-1].status === 'error' ? 'Error' : 'Other'; - return ( - - 0 ? tutorial.title : ''} placement='right' arrow > - - - - - - - )})} - -
- - - : null +
+
} + classes={{root: this.props.classes.verticalStepper}} + > + {steps.map((step, i) => { + // var tutorialStatus = this.props.status[verticalTutorialId-1].status === 'success' ? 'Success' : + // this.props.status[verticalTutorialId-1].status === 'error' ? 'Error' : 'Other'; + return ( + + + {this.props.tutorialStep(i)}}> + + + + + + )})} + + ); }; } @@ -204,13 +98,16 @@ class StepperVertical extends Component { StepperVertical.propTypes = { status: PropTypes.array.isRequired, change: PropTypes.number.isRequired, - currentTutorialId: PropTypes.number.isRequired + currentTutorialId: PropTypes.number.isRequired, + activeStep: PropTypes.number.isRequired, + tutorialStep: PropTypes.func.isRequired }; const mapStateToProps = state => ({ change: state.tutorial.change, status: state.tutorial.status, - currentTutorialId: state.tutorial.currentId + currentTutorialId: state.tutorial.currentId, + activeStep: state.tutorial.activeStep }); -export default connect(mapStateToProps, null)(withRouter(withStyles(styles, {withTheme: true})(withWidth()(StepperVertical)))); +export default connect(mapStateToProps, { tutorialStep })(withRouter(withStyles(styles, {withTheme: true})(StepperVertical))); diff --git a/src/components/Tutorial/Tutorial.js b/src/components/Tutorial/Tutorial.js index cba3ba7..621d221 100644 --- a/src/components/Tutorial/Tutorial.js +++ b/src/components/Tutorial/Tutorial.js @@ -1,35 +1,29 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; -import { tutorialId, setTutorialLevel } from '../../actions/tutorialActions'; +import { tutorialId, tutorialStep } from '../../actions/tutorialActions'; import Breadcrumbs from '../Breadcrumbs'; import StepperHorizontal from './StepperHorizontal'; import StepperVertical from './StepperVertical'; import Instruction from './Instruction'; -import BlocklyWindow from '../Blockly/BlocklyWindow'; -import SolutionCheck from './SolutionCheck'; -import CodeViewer from '../CodeViewer'; +import Assessment from './Assessment'; import NotFound from '../NotFound'; -import { tutorials } from './tutorials'; +import tutorials from './tutorials.json'; -import withWidth, { isWidthUp } from '@material-ui/core/withWidth'; -import Tabs from '@material-ui/core/Tabs'; -import Tab from '@material-ui/core/Tab'; -import Grid from '@material-ui/core/Grid'; import Card from '@material-ui/core/Card'; +import Button from '@material-ui/core/Button'; class Tutorial extends Component { componentDidMount(){ - this.props.tutorialId(Number(this.props.match.params.tutorialId)-1); + this.props.tutorialId(Number(this.props.match.params.tutorialId)); } componentDidUpdate(props, state){ - if(props.currentTutorialId+1 !== Number(this.props.match.params.tutorialId)){ - this.props.tutorialId(Number(this.props.match.params.tutorialId)-1); - this.props.setTutorialLevel('instruction'); + if(props.currentTutorialId !== Number(this.props.match.params.tutorialId)){ + this.props.tutorialId(Number(this.props.match.params.tutorialId)); } } @@ -37,78 +31,55 @@ class Tutorial extends Component { this.props.tutorialId(null); } - onChange = (e, value) => { - this.props.setTutorialLevel(value); - } - render() { var currentTutorialId = this.props.currentTutorialId; + var tutorial = tutorials.filter(tutorial => tutorial.id === currentTutorialId)[0]; + var steps = tutorial ? tutorial.steps : null; + var step = steps ? steps[this.props.activeStep] : null; return ( - !Number.isInteger(currentTutorialId) || currentTutorialId+1 < 1 || currentTutorialId+1 > tutorials.length ? + !Number.isInteger(currentTutorialId) || currentTutorialId < 1 || currentTutorialId > tutorials.length ? : -
- +
+ - + -
- +
+ - {/* width of vertical stepper is 30px*/} - - - - - + + {step ? + step.type === 'instruction' ? + + : // if step.type === 'assessment' + : null} -
- {this.props.level === 'instruction' ? - : null } - {this.props.level === 'assessment' ? - - - - - - - - Hier könnte die Problemstellung stehen. - -
- -
- - - : null } -
- -
+
+ + +
+
+
); }; } Tutorial.propTypes = { tutorialId: PropTypes.func.isRequired, - setTutorialLevel: PropTypes.func.isRequired, + tutorialStep: PropTypes.func.isRequired, currentTutorialId: PropTypes.number, status: PropTypes.array.isRequired, change: PropTypes.number.isRequired, - level: PropTypes.string.isRequired + activeStep: PropTypes.number.isRequired }; const mapStateToProps = state => ({ change: state.tutorial.change, status: state.tutorial.status, currentTutorialId: state.tutorial.currentId, - level: state.tutorial.level + activeStep: state.tutorial.activeStep }); -export default connect(mapStateToProps, { tutorialId, setTutorialLevel })(withWidth()(Tutorial)); +export default connect(mapStateToProps, { tutorialId, tutorialStep })(Tutorial); diff --git a/src/components/Tutorial/TutorialBody.js b/src/components/Tutorial/TutorialBody.js new file mode 100644 index 0000000..f59cfd9 --- /dev/null +++ b/src/components/Tutorial/TutorialBody.js @@ -0,0 +1,128 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { tutorialId, tutorialStep } from '../../actions/tutorialActions'; + +import Breadcrumbs from '../Breadcrumbs'; +import StepperHorizontal from './StepperHorizontal'; +import StepperVertical from './StepperVertical'; +import Instruction from './Instruction'; +import Assessment from './Assessment'; +import NotFound from '../NotFound'; + +import tutorials from './tutorials.json'; + +import withWidth, { isWidthUp } from '@material-ui/core/withWidth'; +import Card from '@material-ui/core/Card'; +import Button from '@material-ui/core/Button'; + +class Tutorial extends Component { + + componentDidMount(){ + this.props.tutorialId(Number(this.props.match.params.tutorialId)); + } + + componentDidUpdate(props, state){ + if(props.currentTutorialId !== Number(this.props.match.params.tutorialId)){ + this.props.tutorialId(Number(this.props.match.params.tutorialId)); + } + } + + componentWillUnmount(){ + this.props.tutorialId(null); + } + + render() { + var currentTutorialId = this.props.currentTutorialId; + var tutorial = tutorials.filter(tutorial => tutorial.id === currentTutorialId)[0]; + var step = tutorial.steps[this.props.activeStep]; + + const Tutorial2 = () => ( +
+ + + + +
+ + +
+ {step.type === 'instruction' ? + + : } + +
+ + +
+
+
+
+ ); + return ( + !Number.isInteger(currentTutorialId) || currentTutorialId < 1 || currentTutorialId > tutorials.length ? + + : + + ); + }; +} + +Tutorial.propTypes = { + tutorialId: PropTypes.func.isRequired, + currentTutorialId: PropTypes.number, + status: PropTypes.array.isRequired, + change: PropTypes.number.isRequired, + activeStep: PropTypes.number.isRequired +}; + +const mapStateToProps = state => ({ + change: state.tutorial.change, + status: state.tutorial.status, + currentTutorialId: state.tutorial.currentId, + activeStep: state.tutorial.activeStep +}); + +export default connect(mapStateToProps, { tutorialId, tutorialStep })(withWidth()(Tutorial)); + + + +// +// + +// +// {/* width of vertical stepper is 30px*/} +// +// +// +// +// +// +//
+// {this.props.level === 'instruction' ? +// : null } +// {this.props.level === 'assessment' ? +// +// +// +// +// +// +// +// Hier könnte die Problemstellung stehen. +// +//
+// +//
+// +// +// : null } +//
+// +//
diff --git a/src/components/Tutorial/TutorialHome.js b/src/components/Tutorial/TutorialHome.js index c00dc08..6eec3e0 100644 --- a/src/components/Tutorial/TutorialHome.js +++ b/src/components/Tutorial/TutorialHome.js @@ -6,7 +6,7 @@ import clsx from 'clsx'; import Breadcrumbs from '../Breadcrumbs'; -import { tutorials } from './tutorials'; +import tutorials from './tutorials.json'; import { Link } from 'react-router-dom'; @@ -59,9 +59,9 @@ class TutorialHome extends Component { this.props.status[i].status === 'error' ? 'Error' : 'Other'; return ( - + - {tutorials[i].title} + {tutorial.title} {tutorialStatus !== 'Other' ?
@@ -72,7 +72,6 @@ class TutorialHome extends Component { } - )})} diff --git a/src/components/Tutorial/tutorials.json b/src/components/Tutorial/tutorials.json index e185ffc..e2fcef8 100644 --- a/src/components/Tutorial/tutorials.json +++ b/src/components/Tutorial/tutorials.json @@ -4,38 +4,33 @@ "title": "Erste Schritte", "steps": [ { - "id": 1, "type": "instruction", "headline": "Erste Schritte", - "text1": "In diesem Tutorial lernst du die ersten Schritte mit der senseBox kennen. Du erstellst ein erstes Programm, baust einen ersten Schaltkreis auf und lernst, wie du das Programm auf die senseBox MCU überträgst", + "text1": "In diesem Tutorial lernst du die ersten Schritte mit der senseBox kennen. Du erstellst ein erstes Programm, baust einen ersten Schaltkreis auf und lernst, wie du das Programm auf die senseBox MCU überträgst.", "hardware": ["senseboxmcu", "led", "breadboard", "jst-adapter", "resistor"], "requirements": [] }, { - "id": 2, "type": "instruction", "headline": "Aufbau der Schaltung", - "text1": "Stecke die LED auf das Breadboard und verbinde diese mithile des Widerstandes und dem JST Kabel mit dem Port Digital/Analog 1" + "text1": "Stecke die LED auf das Breadboard und verbinde diese mithile des Widerstandes und dem JST Kabel mit dem Port Digital/Analog 1." }, { - "id": 3, "type": "instruction", "headline": "Programmierung", "text1": "Jedes Programm für die senseBox besteht aus zwei Funktionen. Die Setup () Funktion wird zu Begin einmalig ausgeführt und der Programmcode Schrittweise ausgeführt. Nachdem die Setup () Funktion durchlaufen worden ist wird der Programmcode aus der zweiten Funktion, der Endlosschleife, fortlaufend wiederholt.", "xml": "" }, { - "id": 4, "type": "instruction", "headline": "Leuchten der LED", "text1": "Um nun die LED zum leuchten zu bringen wird folgender Block in die Endlosschleife eingefügt. Der Block bietet dir auszuwählen an welchen Pin die LED angeschlossen wurd und ob diese ein oder ausgeschaltet werden soll.", "xml": "" }, { - "id": 5, "type": "task", "headline": "Aufgabe 1", - "text1": "Verwenden den Block zum leuchten der LED und übertrage dein erstes Programm auf die senseBox MCU", + "text1": "Verwenden den Block zum leuchten der LED und übertrage dein erstes Programm auf die senseBox MCU.", "xml": "" } ] diff --git a/src/components/WorkspaceStats.js b/src/components/WorkspaceStats.js index b18d4e3..9a98571 100644 --- a/src/components/WorkspaceStats.js +++ b/src/components/WorkspaceStats.js @@ -42,7 +42,7 @@ class WorkspaceStats extends Component { style={{ marginRight: '1rem' }} color="primary" avatar={} - label={this.props.create > 0 ? this.props.create : 0}> // initialXML is created automatically, Block is not part of the statistics + label={this.props.create > 0 ? this.props.create : 0}> {/* initialXML is created automatically, Block is not part of the statistics */} @@ -58,7 +58,7 @@ class WorkspaceStats extends Component { style={{ marginRight: '1rem' }} color="primary" avatar={} - label={this.props.move > 0 ? this.props.move : 0}> // initialXML is moved automatically, Block is not part of the statistics + label={this.props.move > 0 ? this.props.move : 0}> {/* initialXML is moved automatically, Block is not part of the statistics */} diff --git a/src/reducers/tutorialReducer.js b/src/reducers/tutorialReducer.js index e951cb0..3769c05 100644 --- a/src/reducers/tutorialReducer.js +++ b/src/reducers/tutorialReducer.js @@ -1,4 +1,4 @@ -import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_LEVEL } from '../actions/types'; +import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from '../actions/types'; import { tutorials } from '../components/Tutorial/tutorials'; @@ -7,7 +7,8 @@ const initialState = { JSON.parse(window.localStorage.getItem('tutorial')) : new Array(tutorials.length).fill({}), level: 'instruction', - currentId: null, + currentId: 0, + activeStep: 0, change: 0 }; @@ -32,10 +33,10 @@ export default function(state = initialState, action){ ...state, currentId: action.payload } - case TUTORIAL_LEVEL: + case TUTORIAL_STEP: return { ...state, - level: action.payload + activeStep: action.payload } default: return state;