-
+
+
-
+
-
-
+
+
+ {/* calc(Card-padding: 10px + Button-height: 35px + Button-marginTop: 15px)*/}
+
+ {step ?
+ step.type === 'instruction' ?
+
+ : // if step.type === 'assessment'
+ : null}
- {/* width of vertical stepper is 30px*/}
-
-
-
-
-
-
-
- {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/TutorialHome.js b/src/components/Tutorial/TutorialHome.js
index c00dc08..3b73ac7 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';
@@ -14,6 +14,7 @@ import { fade } from '@material-ui/core/styles/colorManipulator';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -21,20 +22,23 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const styles = (theme) => ({
outerDiv: {
position: 'absolute',
- right: '-29px',
- bottom: '-29px',
- width: '140px',
- height: '140px',
- borderStyle: 'solid',
- borderWidth: '10px',
- borderRadius: '50%',
- borderColor: fade(theme.palette.primary.main, 0.2),
- color: fade(theme.palette.primary.main, 0.2)
+ right: '-30px',
+ bottom: '-30px',
+ width: '160px',
+ height: '160px',
+ color: fade(theme.palette.secondary.main, 0.6)
},
outerDivError: {
- borderColor: fade(theme.palette.error.dark, 0.2),
+ stroke: fade(theme.palette.error.dark, 0.2),
color: fade(theme.palette.error.dark, 0.2)
},
+ outerDivSuccess: {
+ stroke: fade(theme.palette.primary.main, 0.2),
+ color: fade(theme.palette.primary.main, 0.2)
+ },
+ outerDivOther: {
+ stroke: fade(theme.palette.secondary.main, 0.2)
+ },
innerDiv: {
width: 'inherit',
height: 'inherit',
@@ -55,24 +59,38 @@ class TutorialHome extends Component {
Tutorial-Übersicht
{tutorials.map((tutorial, i) => {
- var tutorialStatus = this.props.status[i].status === 'success' ? 'Success' :
- this.props.status[i].status === 'error' ? 'Error' : 'Other';
+ var steps = tutorial.steps;
+ var tasks = steps.filter(task => task.type === 'task');
+ var status = this.props.status.filter(status => status.id === tutorial.id)[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 tutorialStatus = success === 1 ? 'Success' : error ? 'Error' : 'Other';
return (
-
+
- {tutorials[i].title}
- {tutorialStatus !== 'Other' ?
-
-
+ {tutorial.title}
+
+
+
+
+
+ {error || success === 1 ?
-
+ :
0 ? this.props.classes.outerDivSuccess : {}}>{Math.round(success*100)}%
+ }
- : null
- }
+
-
)})}
diff --git a/src/components/Tutorial/compareXml.js b/src/components/Tutorial/compareXml.js
new file mode 100644
index 0000000..5ca4619
--- /dev/null
+++ b/src/components/Tutorial/compareXml.js
@@ -0,0 +1,78 @@
+export const checkXml = (originalXmlString, userXmlString) => {
+ var originalXml = parseXml(originalXmlString);
+ var userXml = parseXml(userXmlString);
+ return compareXml(originalXml, userXml);
+};
+
+const parseXml = (xmlString) => {
+ var parser = new DOMParser();
+ var xmlDoc = parser.parseFromString(xmlString, "text/xml");
+ return xmlDoc;
+};
+
+const compareNumberOfBlocks = (originalBlocks, userBlocks) => {
+ if(originalBlocks.length !== userBlocks.length){
+ if(originalBlocks.length > userBlocks.length){
+ return {text: 'Es wurden zu wenig Blöcke verwendet.', type: 'error'};
+ }
+ else {
+ return {text: 'Es wurden zu viele Blöcke verwendet.', type: 'error'};
+ }
+ }
+};
+
+const compareBlockType = (originalBlock, userBlock, index) => {
+ if(originalBlock.attributes['type'].value !== userBlock.attributes['type'].value){
+ return {text: `Es wurde ein falscher Blocktyp an Position ${index+1} verwendet`, type: 'error'};
+ }
+};
+
+const compareParentBlock = (originalBlock, userBlock, index) => {
+ // using parentNode instead of parenElement
+ // see https://stackoverflow.com/questions/8685739/difference-between-dom-parentnode-and-parentelement
+ if(originalBlock.parentNode.attributes['name']){
+ if(userBlock.parentNode.attributes['name']){
+ // do the blocks have the same name-properties?
+ if(originalBlock.parentNode.attributes['name'].value !== userBlock.parentNode.attributes['name'].value){
+ if(userBlock.parentNode.attributes['name'].value === 'LOOP_FUNC' || userBlock.parentNode.attributes['name'].value === 'SETUP_FUNC'){
+ return {text: `Der Block mit dem Typen '${userBlock.attributes['type'].value}' wurde irrtümlicherweise in die ${userBlock.parentNode.attributes['name'].value === 'SETUP_FUNC' ? 'Setup' : 'Endlosschleifen'}-Funktion geschrieben.
+ Verschiebe den gesamten Block (und alle dazugehörigen Blöcke) in die ${userBlock.parentNode.attributes['name'].value !== 'SETUP_FUNC' ? 'Setup' : 'Endlosschleifen'}-Funktion.`, type: 'error'};
+ }
+ // TODO: has a block two name-properties?
+ return {text: `Der Block mit dem Typen '${userBlock.attributes['type'].value}' hat ein falsches 'name'-Attribut`, type: 'error'};
+ }
+ }
+ // user-block has not a name-attribute
+ else {
+ // do the user-block has a xmlns-attribute -> user-block is not connected
+ if(userBlock.parentNode.attributes['xmlns']){
+ return {text: `Der Block mit dem Typen '${userBlock.attributes['type'].value}' hat keine Verbindung zu einem anderen Block.`, type: 'error'};
+ }
+ // user-block has not a xmlns- AND name-attribute
+ else {
+ return {text: `Der Block an Position ${index+1} ist falsch eingeordnet. Tipp: Block an Position ${index+1} einem vorherigen Block unterordnen.`, type: 'error'};
+ }
+ }
+ }
+};
+
+const compareXml = (originalXml, userXml) => {
+ var originalItemList = originalXml.getElementsByTagName("block");
+ var userItemList = userXml.getElementsByTagName("block");
+
+ // compare number of blocks
+ var number = compareNumberOfBlocks(originalItemList, userItemList);
+ if(number){return number;}
+
+ for(var i=0; i < originalItemList.length; i++){
+ // compare type
+ var type = compareBlockType(originalItemList[i], userItemList[i], i);
+ if(type){return type;}
+
+ // compare name
+ var parent = compareParentBlock(originalItemList[i], userItemList[i], i);
+ if(parent){return parent;}
+ }
+
+ return {text: 'Super. Alles richtig!', type: 'success'};
+};
diff --git a/src/components/Tutorial/tutorials.js b/src/components/Tutorial/tutorials.js
index e16d078..5cdc203 100644
--- a/src/components/Tutorial/tutorials.js
+++ b/src/components/Tutorial/tutorials.js
@@ -18,6 +18,23 @@ export const tutorials = [
`
},
+ "solution": `
+
+
+
+
+
+
+
+ TRUE
+
+
+
+
+
+
+
+ `,
"test": function(workspace){
var wifi = workspace.getBlocksByType('sensebox_wifi'); // result is an array with Blocks as objects
if(wifi.length > 0){
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..ad80903 100644
--- a/src/reducers/tutorialReducer.js
+++ b/src/reducers/tutorialReducer.js
@@ -1,13 +1,48 @@
-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';
+import tutorials from '../components/Tutorial/tutorials.json';
+
+const initialStatus = () => {
+ if(window.localStorage.getItem('status')){
+ var status = JSON.parse(window.localStorage.getItem('status'));
+ var existingTutorialIds = [];
+ for(var i = 0; i < tutorials.length; i++){
+ var tutorialsId = tutorials[i].id
+ existingTutorialIds.push(tutorialsId);
+ if(status.findIndex(status => status.id === tutorialsId) > -1){
+ var tasks = tutorials[i].steps.filter(step => step.type === 'task');
+ var existingTaskIds = [];
+ for(var j = 0; j < tasks.length; j++){
+ var tasksId = tasks[j].id;
+ existingTaskIds.push(tasksId);
+ if(status[i].tasks.findIndex(task => task.id === tasksId) === -1){
+ // task does not exist
+ status[i].tasks.push({id: tasksId});
+ }
+ }
+ // deleting old tasks which do not longer exist
+ if(existingTaskIds.length > 0){
+ status[i].tasks = status[i].tasks.filter(task => existingTaskIds.indexOf(task.id) > -1);
+ }
+ }
+ else{
+ status.push({id: tutorialsId, tasks: new Array(tutorials[i].steps.filter(step => step.type === 'task').length).fill({})});
+ }
+ }
+ // deleting old tutorials which do not longer exist
+ if(existingTutorialIds.length > 0){
+ status = status.filter(status => existingTutorialIds.indexOf(status.id) > -1);
+ }
+ return status;
+ }
+ // window.localStorage.getItem('status') does not exist
+ return tutorials.map(tutorial => {return {id: tutorial.id, tasks: tutorial.steps.filter(step => step.type === 'task').map(task => {return {id: task.id};})};});
+};
const initialState = {
- status: window.localStorage.getItem('tutorial') ?
- JSON.parse(window.localStorage.getItem('tutorial'))
- : new Array(tutorials.length).fill({}),
- level: 'instruction',
+ status: initialStatus(),
currentId: null,
+ activeStep: 0,
change: 0
};
@@ -17,7 +52,7 @@ export default function(state = initialState, action){
case TUTORIAL_ERROR:
case TUTORIAL_XML:
// update locale storage - sync with redux store
- window.localStorage.setItem('tutorial', JSON.stringify(action.payload));
+ window.localStorage.setItem('status', JSON.stringify(action.payload));
return {
...state,
status: action.payload
@@ -32,10 +67,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;