splitting a tutorial into introduction and assessment

src/components/Blockly/BlocklyWindow.js

@@ -48,7 +48,7 @@ class BlocklyWindow extends Component {
           colour: '#4EAF47', // senseBox-green
           snap: false
         }}
-        media={'media/'}
+        media={'/media/'}
         move={{ // https://developers.google.com/blockly/guides/configure/web/move
           scrollbars: true,
           drag: true,

src/components/Breadcrumbs.js

@@ -11,7 +11,7 @@ class MyBreadcrumbs extends Component {
       this.props.content && this.props.content.length > 1 ?
         <Breadcrumbs separator="›">
           {this.props.content.splice(0, this.props.content.length-1).map((content, i) => (
-            <Link to={content.link} style={{textDecoration: 'none'}}>
+            <Link to={content.link} style={{textDecoration: 'none'}} key={i}>
               <Typography color="secondary">{content.title}</Typography>
             </Link>
           ))}

src/components/CodeViewer.js

@@ -75,7 +75,7 @@ class CodeViewer extends Component {
     var curlyBrackets = '{ }';
     var unequal = '<>';
     return (
-      <Card style={{height: '500px'}}>
+      <Card style={{height: '100%', maxHeight: '500px'}}>
         <Accordion
           square={true}
           style={{margin: 0}}

src/components/Navbar.js

@@ -98,8 +98,8 @@ class Navbar extends Component {
           </div>
           <List>
             {[{text: 'Tutorials', icon: faChalkboardTeacher}, {text: 'Einstellungen', icon: faCog}].map((item, index) => (
-              <Link to={"/tutorial"} style={{textDecoration: 'none', color: 'inherit'}}>
-                <ListItem button key={index} onClick={this.toggleDrawer}>
+              <Link to={"/tutorial"} key={index} style={{textDecoration: 'none', color: 'inherit'}}>
+                <ListItem button onClick={this.toggleDrawer}>
                   <ListItemIcon><FontAwesomeIcon icon={item.icon}/></ListItemIcon>
                   <ListItemText primary={item.text} />
                 </ListItem>

src/components/Tutorial/Tutorial.js

@@ -3,17 +3,70 @@ import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
 
 import Breadcrumbs from '../Breadcrumbs';
+import BlocklyWindow from '../Blockly/BlocklyWindow';
+import CodeViewer from '../CodeViewer';
+
+import { withStyles } from '@material-ui/core/styles';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Grid from '@material-ui/core/Grid';
+import Card from '@material-ui/core/Card';
+
+const styles = () => ({
+  gridHeight: {
+    height: 'inherit'
+  }
+});
 
 class Tutorial extends Component {
+
+  state={
+    value: 'introduction'
+  }
+
+  onChange = (e, value) => {
+    this.setState({ value: value });
+  }
+
   render() {
     return (
       <div>
         <Breadcrumbs content={[{link: '/', title: 'Home'},{link: '/tutorial', title: 'Tutorial'}, {link: `/tutorial/${this.props.match.params.tutorialId}`, title: this.props.match.params.tutorialId}]}/>
 
         <h1>Tutorial {this.props.match.params.tutorialId}</h1>
+        <Tabs
+          value={this.state.value}
+          indicatorColor="primary"
+          textColor="inherit"
+          variant='fullWidth'
+          onChange={this.onChange}
+        >
+          <Tab label="Anleitung" value='introduction' disableRipple/>
+          <Tab label="Aufgabe" value='assessment' disableRipple/>
+        </Tabs>
+
+        <div style={{marginTop: '20px'}}>
+          {this.state.value === 'introduction' ?
+            'Hier könnte eine Anleitung stehen.': null }
+          {this.state.value === 'assessment' ?
+            <Grid container spacing={2}>
+              <Grid item xs={12} md={6} lg={8}>
+                <BlocklyWindow />
+              </Grid>
+              <Grid item xs={12} md={6} lg={4}>
+                <Card style={{height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px'}}>
+                  Hier könnte die Problemstellung stehen.
+                </Card>
+                <div style={{height: '50%'}}>
+                  <CodeViewer />
+                </div>
+              </Grid>
+            </Grid>
+          : null }
+        </div>
       </div>
     );
   };
 }
 
-export default withRouter(Tutorial);
+export default withRouter(withStyles(styles)(Tutorial));