diff --git a/src/actions/tutorialActions.js b/src/actions/tutorialActions.js
index 147c97b..31e3b6e 100644
--- a/src/actions/tutorialActions.js
+++ b/src/actions/tutorialActions.js
@@ -1,15 +1,25 @@
 import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from './types';
 
+import tutorials from '../components/Tutorial/tutorials.json';
+
 export const tutorialChange = () => (dispatch) => {
   dispatch({
     type: TUTORIAL_CHANGE
   });
 };
 
-export const tutorialCheck = (status) => (dispatch, getState) => {
+export const tutorialCheck = (status, step) => (dispatch, getState) => {
   var tutorialsStatus = getState().tutorial.status;
   var id = getState().tutorial.currentId;
-  tutorialsStatus[id] = {...tutorialsStatus[id], status: status};
+  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);
+  tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = {
+    ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex],
+    type: status
+  };
   dispatch({
     type: status === 'success' ? TUTORIAL_SUCCESS : TUTORIAL_ERROR,
     payload: tutorialsStatus
@@ -19,14 +29,23 @@ export const tutorialCheck = (status) => (dispatch, getState) => {
 
 export const storeTutorialXml = (code) => (dispatch, getState) => {
   var id = getState().tutorial.currentId;
-  var level = getState().tutorial.level;
-  if(id !== null && level === 'assessment'){
-    var tutorialsStatus = getState().tutorial.status;
-    tutorialsStatus[id] = {...tutorialsStatus[id], xml: code};
-    dispatch({
-      type: TUTORIAL_XML,
-      payload: tutorialsStatus
-    });
+  if(id !== null){
+    var activeStep = getState().tutorial.activeStep;
+    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);
+      tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = {
+        ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex],
+        xml: code
+      };
+      dispatch({
+        type: TUTORIAL_XML,
+        payload: tutorialsStatus
+      });
+    }
   }
 };
 
diff --git a/src/components/Tutorial/Assessment.js b/src/components/Tutorial/Assessment.js
index 88c3cc9..f15f79b 100644
--- a/src/components/Tutorial/Assessment.js
+++ b/src/components/Tutorial/Assessment.js
@@ -13,20 +13,26 @@ import Typography from '@material-ui/core/Typography';
 class Assessment extends Component {
 
   render() {
-    var currentTutorialId = this.props.currentTutorialId;
-    var step = this.props.step
+    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]
+
     return (
       <div style={{width: '100%'}}>
-        <Typography variant='h4' style={{marginBottom: '5px'}}>{step.headline}</Typography>
+        <Typography variant='h4' style={{marginBottom: '5px'}}>{currentTask.headline}</Typography>
         <Grid container spacing={2} style={{marginBottom: '5px'}}>
           <Grid item xs={12} md={6} lg={8} style={{ position: 'relative' }}>
             <SolutionCheck />
-            <BlocklyWindow initialXml={this.props.status[currentTutorialId].xml ? this.props.status[currentTutorialId].xml : null}/>
+            <BlocklyWindow initialXml={statusTask.xml ? statusTask.xml : null}/>
           </Grid>
           <Grid item xs={12} md={6} lg={4}>
             <Card style={{height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px'}}>
               <Typography variant='h5'>Arbeitsauftrag</Typography>
-              <Typography>{step.text1}</Typography>
+              <Typography>{currentTask.text1}</Typography>
             </Card>
             <div style={{height: '50%'}}>
               <CodeViewer />
diff --git a/src/components/Tutorial/StepperHorizontal.js b/src/components/Tutorial/StepperHorizontal.js
index cd520ae..10aa0ff 100644
--- a/src/components/Tutorial/StepperHorizontal.js
+++ b/src/components/Tutorial/StepperHorizontal.js
@@ -21,6 +21,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 const styles = (theme) => ({
   stepper: {
     width: 'calc(100% - 40px)',
+    height: '40px',
     borderRadius: '25px',
     padding: '0 20px',
     margin: '20px 0',
@@ -51,30 +52,44 @@ class StepperHorizontal extends Component {
 
   render() {
     var tutorialId = this.props.currentTutorialId;
-    var tutorialStatus = this.props.status[tutorialId].status === 'success' ? 'Success' :
-                          this.props.status[tutorialId].status === 'error' ? 'Error' : 'Other';
+    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 tutorialStatus = success === 1 ? 'Success' : error ? 'Error' : 'Other';
     return (
-      <div className={clsx(this.props.classes.stepper, this.props.classes['stepper'+tutorialStatus])}>
-        <Button
-          disabled={tutorialId === 1}
-          onClick={() => {this.props.history.push(`/tutorial/${tutorialId-1}`)}}
-        >
-          {'<'}
-        </Button>
-        <Stepper activeStep={tutorialId} orientation="horizontal"
-                 style={{padding: 0}} classes={{root: this.props.classes.color}}>
-          <Step expanded completed={false}>
-            <StepLabel icon={tutorialStatus !== 'Other' ? <div className={clsx(tutorialStatus === 'Error' ? this.props.classes.iconDivError: this.props.classes.iconDivSuccess)}><FontAwesomeIcon className={this.props.classes.icon} icon={tutorialStatus === 'Success' ? faCheck : faTimes}/></div> : ''}>
-              <h1 style={{margin: 0}}>{tutorials.filter(tutorial => tutorial.id === tutorialId)[0].title}</h1>
-            </StepLabel>
-          </Step>
-        </Stepper>
-        <Button
-          disabled={tutorialId+1 > tutorials.length}
-          onClick={() => {this.props.history.push(`/tutorial/${tutorialId+1}`)}}
-        >
-          {'>'}
-        </Button>
+      <div style={{position: 'relative'}}>
+        {error || success > 0 ?
+          <div style={{zIndex: -1, width: error ? 'calc(100% - 40px)' : `calc(${success*100}% - 40px)`, borderRadius: success === 1 || error ? '25px' : '25px 0 0 25px', position: 'absolute', margin: 0, left: 0}} className={clsx(this.props.classes.stepper, error ? this.props.classes.stepperError : this.props.classes.stepperSuccess)}>
+          </div>
+        : null}
+        {success < 1 && !error ?
+          <div style={{zIndex: -2, width: `calc(${(1-success)*100}% - 40px)`, borderRadius: success === 0 ? '25px' : '0px 25px 25px 0', position: 'absolute', margin: 0, right: 0}} className={clsx(this.props.classes.stepper, this.props.classes.stepperOther)}>
+          </div>
+        : null}
+        <div className={this.props.classes.stepper}>
+          <Button
+            disabled={tutorialId === 1}
+            onClick={() => {this.props.history.push(`/tutorial/${tutorialId-1}`)}}
+          >
+            {'<'}
+          </Button>
+          <Stepper activeStep={tutorialId} orientation="horizontal"
+                   style={{padding: 0}} classes={{root: this.props.classes.color}}>
+            <Step expanded completed={false}>
+              <StepLabel icon={tutorialStatus !== 'Other' ? <div className={tutorialStatus === 'Success' && success === 1 ? this.props.classes.iconDivSuccess : this.props.classes.iconDivError}><FontAwesomeIcon className={this.props.classes.icon} icon={tutorialStatus === 'Success' ? faCheck : faTimes}/></div> : ''}>
+                <h1 style={{margin: 0}}>{tutorials.filter(tutorial => tutorial.id === tutorialId)[0].title}</h1>
+              </StepLabel>
+            </Step>
+          </Stepper>
+          <Button
+            disabled={tutorialId+1 > tutorials.length}
+            onClick={() => {this.props.history.push(`/tutorial/${tutorialId+1}`)}}
+          >
+            {'>'}
+          </Button>
+        </div>
       </div>
     );
   };
diff --git a/src/components/Tutorial/StepperVertical.js b/src/components/Tutorial/StepperVertical.js
index 2c2c952..dad7caa 100644
--- a/src/components/Tutorial/StepperVertical.js
+++ b/src/components/Tutorial/StepperVertical.js
@@ -7,6 +7,7 @@ import { withRouter } from 'react-router-dom';
 
 import clsx from 'clsx';
 
+import { fade } from '@material-ui/core/styles/colorManipulator';
 import { withStyles } from '@material-ui/core/styles';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
@@ -31,12 +32,24 @@ const styles = (theme) => ({
     width: '24px',
     height: '24px'
   },
-  stepIconActive: {
+  stepIconLargeSuccess: {
+    borderColor: theme.palette.primary.main,
+  },
+  stepIconLargeError: {
+    borderColor: theme.palette.error.dark,
+  },
+  stepIconActiveOther: {
     backgroundColor: theme.palette.secondary.main
   },
+  stepIconActiveSuccess: {
+    backgroundColor: fade(theme.palette.primary.main, 0.6)
+  },
+  stepIconActiveError: {
+    backgroundColor: fade(theme.palette.error.dark, 0.6)
+  },
   connector: {
     height: '10px',
-    borderLeft: `3px solid ${theme.palette.primary.main}`,
+    borderLeft: `2px solid black`,
     margin: 'auto'
   }
 });
@@ -56,6 +69,8 @@ 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'}}>
         <Stepper
@@ -65,8 +80,9 @@ class StepperVertical extends Component {
           classes={{root: this.props.classes.verticalStepper}}
         >
           {steps.map((step, i) => {
-            // var tutorialStatus = this.props.status[verticalTutorialId-1].status === 'success' ? 'Success' :
-                                  // this.props.status[verticalTutorialId-1].status === 'error' ? 'Error' : 'Other';
+            var tasksIndex = tasks.indexOf(step);
+            var taskType = tasksIndex > -1 ? tutorialStatus.tasks[tasksIndex].type : null;
+            var taskStatus = taskType === 'success' ? 'Success' : taskType === 'error' ? 'Error' : 'Other';
             return (
               <Step key={i}>
                 <Tooltip title={step.headline} placement='right' arrow >
@@ -76,10 +92,10 @@ class StepperVertical extends Component {
                       classes={{
                         root: step.type === 'task' ?
                                 i === activeStep ?
-                                  clsx(this.props.classes.stepIcon, this.props.classes.stepIconLarge, this.props.classes.stepIconActive)
-                                : clsx(this.props.classes.stepIcon, this.props.classes.stepIconLarge)
+                                  clsx(this.props.classes.stepIcon, this.props.classes.stepIconLarge, this.props.classes['stepIconLarge'+taskStatus], this.props.classes['stepIconActive'+taskStatus])
+                                : clsx(this.props.classes.stepIcon, this.props.classes.stepIconLarge, this.props.classes['stepIconLarge'+taskStatus])
                               : i === activeStep ?
-                                  clsx(this.props.classes.stepIcon, this.props.classes.stepIconActive)
+                                  clsx(this.props.classes.stepIcon, this.props.classes.stepIconActiveOther)
                                 : clsx(this.props.classes.stepIcon)
                       }}
                     >
diff --git a/src/components/Tutorial/Tutorial.js b/src/components/Tutorial/Tutorial.js
index 41a560a..743e6f2 100644
--- a/src/components/Tutorial/Tutorial.js
+++ b/src/components/Tutorial/Tutorial.js
@@ -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 />
+        <StepperHorizontal steps={steps}/>
 
         <div style={{display: 'flex'}}>
           <StepperVertical steps={steps}/>
@@ -52,7 +52,7 @@ class Tutorial extends Component {
             {step ?
               step.type === 'instruction' ?
                 <Instruction step={step}/>
-              : <Assessment step={step}/> // if step.type === 'assessment'
+              : <Assessment steps={steps} step={step}/> // if step.type === 'assessment'
              : null}
 
             <div style={{marginTop: '20px', position: 'absolute', bottom: '10px'}}>
diff --git a/src/components/Tutorial/TutorialHome.js b/src/components/Tutorial/TutorialHome.js
index 6eec3e0..da4ccfb 100644
--- a/src/components/Tutorial/TutorialHome.js
+++ b/src/components/Tutorial/TutorialHome.js
@@ -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,21 +59,37 @@ class TutorialHome extends Component {
         <h1>Tutorial-Übersicht</h1>
         <Grid container spacing={2}>
           {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';
+            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'}}>
                   <Paper style={{height: '150px', padding: '10px', position:'relative', overflow: 'hidden'}}>
                     {tutorial.title}
-                    {tutorialStatus !== 'Other' ?
-                      <div className={clsx(this.props.classes.outerDiv, tutorialStatus === 'Error' ? this.props.classes.outerDivError : null)}>
-                        <div className={this.props.classes.innerDiv}>
+                    <div className={clsx(this.props.classes.outerDiv)} style={{width: '160px', height: '160px', border: 0}}>
+                      <svg style={{width: '100%', height: '100%'}}>
+                        {error || success === 1 ?
+                          <circle className={error ? this.props.classes.outerDivError : this.props.classes.outerDivSuccess} style={{transform: 'rotate(-44deg)', transformOrigin: "50% 50%"}} r="75" cx="50%" cy="50%" fill="none" stroke-width="10"></circle>
+                        : <circle className={this.props.classes.outerDivOther} style={{transform: 'rotate(-44deg)', transformOrigin: "50% 50%"}} r="75" cx="50%" cy="50%" fill="none" stroke-width="10" stroke-dashoffset={`${(75*2*Math.PI)*(1-(50/100+success/2))}`} stroke-dasharray={`${(75*2*Math.PI)*(1-(50/100-success/2))} ${(75*2*Math.PI)*(1-(50/100+success/2))}`}></circle>}
+                        {success < 1 && !error ?
+                          <circle className={this.props.classes.outerDivSuccess} style={{transform: 'rotate(-44deg)', transformOrigin: "50% 50%"}} r="75" cx="50%" cy="50%" fill="none" stroke-width="10" stroke-dashoffset={`${(75*2*Math.PI)*(1-(50/100+success/2))}`} stroke-dasharray={`${(75*2*Math.PI)}`}>
+                          </circle>
+                        : null}
+                      </svg>
+                    </div>
+                    <div className={clsx(this.props.classes.outerDiv, tutorialStatus === 'Error' ? this.props.classes.outerDivError : tutorialStatus === 'Success' ? this.props.classes.outerDivSuccess : null)}>
+                      <div className={this.props.classes.innerDiv}>
+                        {error || success === 1 ?
                           <FontAwesomeIcon size='4x' icon={tutorialStatus === 'Success' ? faCheck : faTimes}/>
-                        </div>
+                        : <Typography variant='h3' className={success > 0 ? this.props.classes.outerDivSuccess : {}}>{Math.round(success*100)}%</Typography>
+                        }
                       </div>
-                      : null
-                    }
+                    </div>
                   </Paper>
                 </Link>
               </Grid>
diff --git a/src/reducers/tutorialReducer.js b/src/reducers/tutorialReducer.js
index 3769c05..470b727 100644
--- a/src/reducers/tutorialReducer.js
+++ b/src/reducers/tutorialReducer.js
@@ -1,13 +1,12 @@
 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 initialState = {
-  status: window.localStorage.getItem('tutorial') ?
-            JSON.parse(window.localStorage.getItem('tutorial'))
-          : new Array(tutorials.length).fill({}),
-  level: 'instruction',
-  currentId: 0,
+  status: window.localStorage.getItem('status') ?
+            JSON.parse(window.localStorage.getItem('status'))
+          : tutorials.map(tutorial => {return {id: tutorial.id, tasks: new Array(tutorial.steps.filter(step => step.type === 'task').length).fill({}) };}),
+  currentId: null,
   activeStep: 0,
   change: 0
 };
@@ -18,7 +17,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