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

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