each task (step) has its own id within a tutorial

src/actions/tutorialActions.js

@@ -11,11 +11,8 @@ export const tutorialChange = () => (dispatch) => {
 export const tutorialCheck = (status, step) => (dispatch, getState) => {
   var tutorialsStatus = getState().tutorial.status;
   var id = getState().tutorial.currentId;
-  var activeStep = getState().tutorial.activeStep;
-  var steps = tutorials.filter(tutorial => tutorial.id === id)[0].steps;
-  var tasks = steps.filter(step => step.type === 'task');
-  var tasksIndex = tasks.indexOf(steps[activeStep]);
   var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus.id === id);
+  var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(task => task.id === step.id);
   tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = {
     ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex],
     type: status
@@ -34,9 +31,8 @@ export const storeTutorialXml = (code) => (dispatch, getState) => {
     var steps = tutorials.filter(tutorial => tutorial.id === id)[0].steps;
     if(steps[activeStep].type === 'task'){
       var tutorialsStatus = getState().tutorial.status;
-      var tasks = steps.filter(step => step.type === 'task');
-      var tasksIndex = tasks.indexOf(steps[activeStep]);
       var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus.id === id);
+      var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(task => task.id === steps[activeStep].id);
       tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = {
         ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex],
         xml: code

src/components/Tutorial/Assessment.js

@@ -14,12 +14,10 @@ class Assessment extends Component {
 
   render() {
     var tutorialId = this.props.currentTutorialId;
-    var steps = this.props.steps;
     var currentTask = this.props.step;
-    var tasks = steps.filter(task => task.type === 'task');
-    var taskIndex = tasks.indexOf(currentTask);
     var status = this.props.status.filter(status => status.id === tutorialId)[0];
-    var statusTask = status.tasks[taskIndex]
+    var taskIndex = status.tasks.findIndex(task => task.id === currentTask.id);
+    var statusTask = status.tasks[taskIndex];
     
     return (
       <div style={{width: '100%'}}>

src/components/Tutorial/SolutionCheck.js

@@ -52,7 +52,7 @@ class SolutionCheck extends Component {
     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.props.tutorialCheck(msg.type, step);
     this.setState({ msg, open: true });
   }
 

src/components/Tutorial/StepperHorizontal.js

@@ -52,11 +52,10 @@ class StepperHorizontal extends Component {
 
   render() {
     var tutorialId = this.props.currentTutorialId;
-    var steps = this.props.steps;
-    var tasks = steps.filter(task => task.type === 'task');
     var status = this.props.status.filter(status => status.id === tutorialId)[0];
-    var error = status.tasks.filter(task => task.type === 'error').length > 0;
+    var tasks = status.tasks;
-    var success = status.tasks.filter(task => task.type === 'success').length / tasks.length;
+    var error = tasks.filter(task => task.type === 'error').length > 0;
+    var success = tasks.filter(task => task.type === 'success').length / tasks.length;
     var tutorialStatus = success === 1 ? 'Success' : error ? 'Error' : 'Other';
     return (
       <div style={{position: 'relative'}}>

src/components/Tutorial/StepperVertical.js

@@ -69,7 +69,6 @@ class StepperVertical extends Component {
   render() {
     var steps = this.props.steps;
     var activeStep = this.props.activeStep;
-    var tasks = steps.filter(task => task.type === 'task');
     var tutorialStatus = this.props.status.filter(status => status.id === this.props.currentTutorialId)[0];
     return (
       <div style={{marginRight: '10px'}}>
@@ -80,7 +79,7 @@ class StepperVertical extends Component {
           classes={{root: this.props.classes.verticalStepper}}
         >
           {steps.map((step, i) => {
-            var tasksIndex = tasks.indexOf(step);
+            var tasksIndex = tutorialStatus.tasks.findIndex(task => task.id === step.id);
             var taskType = tasksIndex > -1 ? tutorialStatus.tasks[tasksIndex].type : null;
             var taskStatus = taskType === 'success' ? 'Success' : taskType === 'error' ? 'Error' : 'Other';
             return (

src/components/Tutorial/Tutorial.js

@@ -43,7 +43,7 @@ class Tutorial extends Component {
       <div>
         <Breadcrumbs content={[{link: '/', title: 'Home'},{link: '/tutorial', title: 'Tutorial'}, {link: `/tutorial/${currentTutorialId}`, title: tutorial.title}]}/>
 
-        <StepperHorizontal steps={steps}/>
+        <StepperHorizontal />
 
         <div style={{display: 'flex'}}>
           <StepperVertical steps={steps}/>
@@ -52,7 +52,7 @@ class Tutorial extends Component {
             {step ?
               step.type === 'instruction' ?
                 <Instruction step={step}/>
-              : <Assessment steps={steps} step={step}/> // if step.type === 'assessment'
+              : <Assessment step={step}/> // if step.type === 'assessment'
              : null}
 
             <div style={{marginTop: '20px', position: 'absolute', bottom: '10px'}}>

src/components/Tutorial/TutorialHome.js

@@ -65,7 +65,6 @@ class TutorialHome extends Component {
             var error = status.tasks.filter(task => task.type === 'error').length > 0;
             var success = status.tasks.filter(task => task.type === 'success').length/tasks.length
             var tutorialStatus = success === 1 ? 'Success' : error ? 'Error' : 'Other';
-            console.log(success);
             return (
               <Grid item xs={12} sm={6} md={4} xl={3} key={i} style={{}}>
                 <Link to={`/tutorial/${tutorial.id}`} style={{textDecoration: 'none', color: 'inherit'}}>

src/components/Tutorial/tutorials.json

@@ -4,6 +4,7 @@
         "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.",
@@ -11,28 +12,74 @@
                 "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."
             },
             {
+                "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": "<xml xmlns='https://developers.google.com/blockly/xml'><block type='arduino_functions' id='QWW|$jB8+*EL;}|#uA' deletable='false' x='27' y='16'></block></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": "<xml xmlns='https://developers.google.com/blockly/xml'><block type='arduino_functions' id='QWW|$jB8+*EL;}|#uA' deletable='false' x='27' y='16'></block></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.",
                 "xml": "<xml xmlns='https://developers.google.com/blockly/xml'><block type='arduino_functions' id='QWW|$jB8+*EL;}|#uA' deletable='false' x='27' y='16'></block></xml>"
             }
         ]
+    },
+    {
+        "id": 2,
+        "title": "WLAN einrichten",
+        "steps": [
+            {
+                "id": 1,
+                "type": "instruction",
+                "headline": "Einführung",
+                "text1": "In diesem Tutorial lernst du wie man die senseBox mit dem Internet verbindest.",
+                "hardware": ["senseboxmcu"],
+                "requirements": [1]
+            },
+            {
+                "id": 2,
+                "type": "instruction",
+                "headline": "Programmierung",
+                "text1": "Man benötigt folgenden Block:",
+                "xml": "<xml xmlns='https://developers.google.com/blockly/xml'><block type='sensebox_wifi' id='-!X.Ay]z1ACt!f5+Vfr8'><field name='SSID'>SSID</field><field name='Password'>Password</field></block></xml>"
+            },
+            {
+                "id": 3,
+                "type": "instruction",
+                "headline": "Block richtig einbinden",
+                "text1": "",
+                "xml": "<xml xmlns='https://developers.google.com/blockly/xml'><block type='arduino_functions' id='QWW|$jB8+*EL;}|#uA' deletable='false' x='27' y='16'><statement name='SETUP_FUNC'><block type='sensebox_wifi' id='W}P2Y^g,muH@]|@anou}'><field name='SSID'>SSID</field><field name='Password'>Password</field></block></statement></block></xml>"
+            },
+            {
+                "id": 4,
+                "type": "task",
+                "headline": "Aufgabe 1",
+                "text1": "Stelle eine WLAN-Verbindung mit einem beliebigen Netzwerk her.",
+                "xml": "<xml xmlns='https://developers.google.com/blockly/xml'><block type='arduino_functions' id='QWW|$jB8+*EL;}|#uA' deletable='false' x='27' y='16'><statement name='SETUP_FUNC'><block type='sensebox_wifi' id='W}P2Y^g,muH@]|@anou}'><field name='SSID'>SSID</field><field name='Password'>Password</field></block></statement></block></xml>"
+            },
+            {
+                "id": 5,
+                "type": "task",
+                "headline": "Aufgabe 2",
+                "text1": "Versuche das gleiche einfach nochmal. Übung macht den Meister! ;)",
+                "xml": "<xml xmlns='https://developers.google.com/blockly/xml'><block type='arduino_functions' id='QWW|$jB8+*EL;}|#uA' deletable='false' x='27' y='16'><statement name='SETUP_FUNC'><block type='sensebox_wifi' id='W}P2Y^g,muH@]|@anou}'><field name='SSID'>SSID</field><field name='Password'>Password</field></block></statement></block></xml>"
+            }
+        ]
     }
 ]

src/reducers/tutorialReducer.js

@@ -33,8 +33,6 @@ const initialStatus = () => {
     if(existingTutorialIds.length > 0){
       status = status.filter(status => existingTutorialIds.indexOf(status.id) > -1);
     }
-    console.log('tutorial', existingTutorialIds);
-    console.log('tutorial', status);
     return status;
   }
   // window.localStorage.getItem('status') does not exist