schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Delucse 2020-09-13 16:02:47 +02:00
parent 6f77b460cb
commit 7300cade5d
9 changed files with 59 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/actions/tutorialActions.js
View File

@ -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

8
src/components/Tutorial/Assessment.js
View File

@ -14,13 +14,11 @@ 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%'}}>
<Typography variant='h4' style={{marginBottom: '5px'}}>{currentTask.headline}</Typography>

2
src/components/Tutorial/SolutionCheck.js
View File

@ -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 });
}

7
src/components/Tutorial/StepperHorizontal.js
View File

@ -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 success = status.tasks.filter(task => task.type === 'success').length / tasks.length;
var tasks = status.tasks;
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'}}>

3
src/components/Tutorial/StepperVertical.js
View File

@ -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 (

4
src/components/Tutorial/Tutorial.js
View File

@ -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'}}>

1
src/components/Tutorial/TutorialHome.js
View File

@ -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'}}>

47
src/components/Tutorial/tutorials.json
View File

@ -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>"
}
]
}
]

2
src/reducers/tutorialReducer.js
View File

@ -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