name of tutorial workspace is automatically derived from the tutorial title and the step heading

src/components/Compile.js

@@ -120,7 +120,7 @@ class Compile extends Component {
             </IconButton>
           </Tooltip>
          :
-          <Button style={{ float: 'right', color: 'white' }} variant="contained" color="primary" onClick={() => this.createFileName()}>
+          <Button style={{ float: 'right', color: 'white' }} variant="contained" color="primary" onClick={() => this.compile()}>
             <FontAwesomeIcon icon={faCogs} style={{marginRight: '5px'}}/> Kompilieren
           </Button>
         }

src/components/Tutorial/Assessment.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { workspaceName } from '../../actions/workspaceActions';
 
 import BlocklyWindow from '../Blockly/BlocklyWindow';
 import SolutionCheck from './SolutionCheck';
@@ -14,6 +15,18 @@ import Typography from '@material-ui/core/Typography';
 
 class Assessment extends Component {
 
+  componentDidMount(){
+    // alert(this.props.name);
+    this.props.workspaceName(this.props.name);
+  }
+
+  componentDidUpdate(props){
+    if(props.name !== this.props.name){
+      // alert(this.props.name);
+      this.props.workspaceName(this.props.name);
+    }
+  }
+
   render() {
     var tutorialId = this.props.currentTutorialId;
     var currentTask = this.props.step;
@@ -47,7 +60,8 @@ class Assessment extends Component {
 Assessment.propTypes = {
   currentTutorialId: PropTypes.number,
   status: PropTypes.array.isRequired,
-  change: PropTypes.number.isRequired
+  change: PropTypes.number.isRequired,
+  workspaceName: PropTypes.func.isRequired
 };
 
 const mapStateToProps = state => ({
@@ -56,4 +70,4 @@ const mapStateToProps = state => ({
   currentTutorialId: state.tutorial.currentId
 });
 
-export default connect(mapStateToProps, null)(withWidth()(Assessment));
+export default connect(mapStateToProps, { workspaceName })(withWidth()(Assessment));

src/components/Tutorial/Tutorial.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { workspaceName } from '../../actions/workspaceActions';
 import { tutorialId, tutorialStep } from '../../actions/tutorialActions';
 
 import Breadcrumbs from '../Breadcrumbs';
@@ -29,6 +30,7 @@ class Tutorial extends Component {
 
   componentWillUnmount(){
     this.props.tutorialId(null);
+    this.props.workspaceName(null);
   }
 
   render() {
@@ -36,6 +38,7 @@ class Tutorial extends Component {
     var tutorial = tutorials.filter(tutorial => tutorial.id === currentTutorialId)[0];
     var steps = tutorial ? tutorial.steps : null;
     var step = steps ? steps[this.props.activeStep] : null;
+    var name = step ? `${tutorial.title.replace(/\s/g,'')}_${step.headline.replace(/\s/g,'')}` : null;
     return (
       !Number.isInteger(currentTutorialId) || currentTutorialId < 1 || currentTutorialId > tutorials.length ?
         <NotFound button={{title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial'}}/>
@@ -52,7 +55,7 @@ class Tutorial extends Component {
             {step ?
               step.type === 'instruction' ?
                 <Instruction step={step}/>
-              : <Assessment step={step}/> // if step.type === 'assessment'
+              : <Assessment step={step} name={name}/> // if step.type === 'assessment'
              : null}
 
             <div style={{marginTop: '20px', position: 'absolute', bottom: '10px'}}>
@@ -69,6 +72,7 @@ class Tutorial extends Component {
 Tutorial.propTypes = {
   tutorialId: PropTypes.func.isRequired,
   tutorialStep: PropTypes.func.isRequired,
+  workspaceName: PropTypes.func.isRequired,
   currentTutorialId: PropTypes.number,
   status: PropTypes.array.isRequired,
   change: PropTypes.number.isRequired,
@@ -82,4 +86,4 @@ const mapStateToProps = state => ({
   activeStep: state.tutorial.activeStep
 });
 
-export default connect(mapStateToProps, { tutorialId, tutorialStep })(Tutorial);
+export default connect(mapStateToProps, { tutorialId, tutorialStep, workspaceName })(Tutorial);

src/components/WorkspaceFunc.js

@@ -65,6 +65,12 @@ class WorkspaceFunc extends Component {
     };
   }
 
+  componentDidUpdate(props){
+    if(props.name !== this.props.name){
+      this.setState({name: this.props.name});
+    }
+  }
+
   toggleDialog = () => {
     this.setState({ open: !this.state });
   }
@@ -112,6 +118,12 @@ class WorkspaceFunc extends Component {
             Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xmlBefore), workspace)
             this.setState({ open: true, file: false, title: 'Keine Blöcke', content: 'Es wurden keine Blöcke detektiert. Bitte überprüfe den XML-Code und versuche es erneut.' });
           }
+          else {
+            if(!this.props.solutionCheck){
+              var extensionPosition = xmlFile.name.lastIndexOf('.');
+              this.props.workspaceName(xmlFile.name.substr(0, extensionPosition));
+            }
+          }
         } catch(err){
           this.setState({ open: true, file: false, title: 'Ungültige XML', content: 'Die XML-Datei konnte nicht in Blöcke zerlegt werden. Bitte überprüfe den XML-Code und versuche es erneut.' });
         }
@@ -129,6 +141,9 @@ class WorkspaceFunc extends Component {
     workspace.options.maxBlocks = Infinity;
     this.props.onChangeCode();
     this.props.clearStats();
+    if(!this.props.solutionCheck){
+      this.props.workspaceName(null);
+    }
   }
 
   render() {