schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

status of tutorial and belonging tasks

Browse Source
This commit is contained in:
Delucse 2020-09-11 17:31:06 +02:00
parent 825075d656
commit f19842ccae
7 changed files with 147 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/actions/tutorialActions.js
View File

@ -1,15 +1,25 @@
import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from './types'; 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) => { export const tutorialChange = () => (dispatch) => {
dispatch({ dispatch({
type: TUTORIAL_CHANGE type: TUTORIAL_CHANGE
}); });
}; };
export const tutorialCheck = (status) => (dispatch, getState) => { export const tutorialCheck = (status, step) => (dispatch, getState) => {
var tutorialsStatus = getState().tutorial.status; var tutorialsStatus = getState().tutorial.status;
var id = getState().tutorial.currentId; 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({ dispatch({
type: status === 'success' ? TUTORIAL_SUCCESS : TUTORIAL_ERROR, type: status === 'success' ? TUTORIAL_SUCCESS : TUTORIAL_ERROR,
payload: tutorialsStatus payload: tutorialsStatus
@ -19,14 +29,23 @@ export const tutorialCheck = (status) => (dispatch, getState) => {
export const storeTutorialXml = (code) => (dispatch, getState) => { export const storeTutorialXml = (code) => (dispatch, getState) => {
var id = getState().tutorial.currentId; var id = getState().tutorial.currentId;
var level = getState().tutorial.level; if(id !== null){
if(id !== null && level === 'assessment'){ var activeStep = getState().tutorial.activeStep;
var tutorialsStatus = getState().tutorial.status; var steps = tutorials.filter(tutorial => tutorial.id === id)[0].steps;
tutorialsStatus[id] = {...tutorialsStatus[id], xml: code}; if(steps[activeStep].type === 'task'){
dispatch({ var tutorialsStatus = getState().tutorial.status;
type: TUTORIAL_XML, var tasks = steps.filter(step => step.type === 'task');
payload: tutorialsStatus 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
});
}
} }
}; };

16
src/components/Tutorial/Assessment.js
View File

@ -13,20 +13,26 @@ import Typography from '@material-ui/core/Typography';
class Assessment extends Component { class Assessment extends Component {
render() { render() {
var currentTutorialId = this.props.currentTutorialId; var tutorialId = this.props.currentTutorialId;
var step = this.props.step 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 ( return (
<div style={{width: '100%'}}> <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 container spacing={2} style={{marginBottom: '5px'}}>
<Grid item xs={12} md={6} lg={8} style={{ position: 'relative' }}> <Grid item xs={12} md={6} lg={8} style={{ position: 'relative' }}>
<SolutionCheck /> <SolutionCheck />
<BlocklyWindow initialXml={this.props.status[currentTutorialId].xml ? this.props.status[currentTutorialId].xml : null}/> <BlocklyWindow initialXml={statusTask.xml ? statusTask.xml : null}/>
</Grid> </Grid>
<Grid item xs={12} md={6} lg={4}> <Grid item xs={12} md={6} lg={4}>
<Card style={{height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px'}}> <Card style={{height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px'}}>
<Typography variant='h5'>Arbeitsauftrag</Typography> <Typography variant='h5'>Arbeitsauftrag</Typography>
<Typography>{step.text1}</Typography> <Typography>{currentTask.text1}</Typography>
</Card> </Card>
<div style={{height: '50%'}}> <div style={{height: '50%'}}>
<CodeViewer /> <CodeViewer />

61
src/components/Tutorial/StepperHorizontal.js
View File

@ -21,6 +21,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const styles = (theme) => ({ const styles = (theme) => ({
stepper: { stepper: {
width: 'calc(100% - 40px)', width: 'calc(100% - 40px)',
height: '40px',
borderRadius: '25px', borderRadius: '25px',
padding: '0 20px', padding: '0 20px',
margin: '20px 0', margin: '20px 0',
@ -51,30 +52,44 @@ class StepperHorizontal extends Component {
render() { render() {
var tutorialId = this.props.currentTutorialId; var tutorialId = this.props.currentTutorialId;
var tutorialStatus = this.props.status[tutorialId].status === 'success' ? 'Success' : var steps = this.props.steps;
this.props.status[tutorialId].status === 'error' ? 'Error' : 'Other'; 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 ( return (
<div className={clsx(this.props.classes.stepper, this.props.classes['stepper'+tutorialStatus])}> <div style={{position: 'relative'}}>
<Button {error || success > 0 ?
disabled={tutorialId === 1} <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)}>
onClick={() => {this.props.history.push(`/tutorial/${tutorialId-1}`)}} </div>
> : null}
{'<'} {success < 1 && !error ?
</Button> <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)}>
<Stepper activeStep={tutorialId} orientation="horizontal" </div>
style={{padding: 0}} classes={{root: this.props.classes.color}}> : null}
<Step expanded completed={false}> <div className={this.props.classes.stepper}>
<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> : ''}> <Button
<h1 style={{margin: 0}}>{tutorials.filter(tutorial => tutorial.id === tutorialId)[0].title}</h1> disabled={tutorialId === 1}
</StepLabel> onClick={() => {this.props.history.push(`/tutorial/${tutorialId-1}`)}}
</Step> >
</Stepper> {'<'}
<Button </Button>
disabled={tutorialId+1 > tutorials.length} <Stepper activeStep={tutorialId} orientation="horizontal"
onClick={() => {this.props.history.push(`/tutorial/${tutorialId+1}`)}} 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> : ''}>
</Button> <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> </div>
); );
}; };

30
src/components/Tutorial/StepperVertical.js
View File

@ -7,6 +7,7 @@ import { withRouter } from 'react-router-dom';
import clsx from 'clsx'; import clsx from 'clsx';
import { fade } from '@material-ui/core/styles/colorManipulator';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import Stepper from '@material-ui/core/Stepper'; import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step'; import Step from '@material-ui/core/Step';
@ -31,12 +32,24 @@ const styles = (theme) => ({
width: '24px', width: '24px',
height: '24px' height: '24px'
}, },
stepIconActive: { stepIconLargeSuccess: {
borderColor: theme.palette.primary.main,
},
stepIconLargeError: {
borderColor: theme.palette.error.dark,
},
stepIconActiveOther: {
backgroundColor: theme.palette.secondary.main backgroundColor: theme.palette.secondary.main
}, },
stepIconActiveSuccess: {
backgroundColor: fade(theme.palette.primary.main, 0.6)
},
stepIconActiveError: {
backgroundColor: fade(theme.palette.error.dark, 0.6)
},
connector: { connector: {
height: '10px', height: '10px',
borderLeft: `3px solid ${theme.palette.primary.main}`, borderLeft: `2px solid black`,
margin: 'auto' margin: 'auto'
} }
}); });
@ -56,6 +69,8 @@ class StepperVertical extends Component {
render() { render() {
var steps = this.props.steps; var steps = this.props.steps;
var activeStep = this.props.activeStep; 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 ( return (
<div style={{marginRight: '10px'}}> <div style={{marginRight: '10px'}}>
<Stepper <Stepper
@ -65,8 +80,9 @@ class StepperVertical extends Component {
classes={{root: this.props.classes.verticalStepper}} classes={{root: this.props.classes.verticalStepper}}
> >
{steps.map((step, i) => { {steps.map((step, i) => {
// var tutorialStatus = this.props.status[verticalTutorialId-1].status === 'success' ? 'Success' : var tasksIndex = tasks.indexOf(step);
// this.props.status[verticalTutorialId-1].status === 'error' ? 'Error' : 'Other'; var taskType = tasksIndex > -1 ? tutorialStatus.tasks[tasksIndex].type : null;
var taskStatus = taskType === 'success' ? 'Success' : taskType === 'error' ? 'Error' : 'Other';
return ( return (
<Step key={i}> <Step key={i}>
<Tooltip title={step.headline} placement='right' arrow > <Tooltip title={step.headline} placement='right' arrow >
@ -76,10 +92,10 @@ class StepperVertical extends Component {
classes={{ classes={{
root: step.type === 'task' ? root: step.type === 'task' ?
i === activeStep ? i === activeStep ?
clsx(this.props.classes.stepIcon, this.props.classes.stepIconLarge, this.props.classes.stepIconActive) 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) : clsx(this.props.classes.stepIcon, this.props.classes.stepIconLarge, this.props.classes['stepIconLarge'+taskStatus])
: i === activeStep ? : 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) : clsx(this.props.classes.stepIcon)
}} }}
> >

4
src/components/Tutorial/Tutorial.js
View File

@ -43,7 +43,7 @@ class Tutorial extends Component {
<div> <div>
<Breadcrumbs content={[{link: '/', title: 'Home'},{link: '/tutorial', title: 'Tutorial'}, {link: `/tutorial/${currentTutorialId}`, title: tutorial.title}]}/> <Breadcrumbs content={[{link: '/', title: 'Home'},{link: '/tutorial', title: 'Tutorial'}, {link: `/tutorial/${currentTutorialId}`, title: tutorial.title}]}/>
<StepperHorizontal /> <StepperHorizontal steps={steps}/>
<div style={{display: 'flex'}}> <div style={{display: 'flex'}}>
<StepperVertical steps={steps}/> <StepperVertical steps={steps}/>
@ -52,7 +52,7 @@ class Tutorial extends Component {
{step ? {step ?
step.type === 'instruction' ? step.type === 'instruction' ?
<Instruction step={step}/> <Instruction step={step}/>
: <Assessment step={step}/> // if step.type === 'assessment' : <Assessment steps={steps} step={step}/> // if step.type === 'assessment'
: null} : null}
<div style={{marginTop: '20px', position: 'absolute', bottom: '10px'}}> <div style={{marginTop: '20px', position: 'absolute', bottom: '10px'}}>

56
src/components/Tutorial/TutorialHome.js
View File

@ -14,6 +14,7 @@ import { fade } from '@material-ui/core/styles/colorManipulator';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons"; import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -21,20 +22,23 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const styles = (theme) => ({ const styles = (theme) => ({
outerDiv: { outerDiv: {
position: 'absolute', position: 'absolute',
right: '-29px', right: '-30px',
bottom: '-29px', bottom: '-30px',
width: '140px', width: '160px',
height: '140px', height: '160px',
borderStyle: 'solid', color: fade(theme.palette.secondary.main, 0.6)
borderWidth: '10px',
borderRadius: '50%',
borderColor: fade(theme.palette.primary.main, 0.2),
color: fade(theme.palette.primary.main, 0.2)
}, },
outerDivError: { 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) 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: { innerDiv: {
width: 'inherit', width: 'inherit',
height: 'inherit', height: 'inherit',
@ -55,21 +59,37 @@ class TutorialHome extends Component {
<h1>Tutorial-Übersicht</h1> <h1>Tutorial-Übersicht</h1>
<Grid container spacing={2}> <Grid container spacing={2}>
{tutorials.map((tutorial, i) => { {tutorials.map((tutorial, i) => {
var tutorialStatus = this.props.status[i].status === 'success' ? 'Success' : var steps = tutorial.steps;
this.props.status[i].status === 'error' ? 'Error' : 'Other'; 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 ( return (
<Grid item xs={12} sm={6} md={4} xl={3} key={i} style={{}}> <Grid item xs={12} sm={6} md={4} xl={3} key={i} style={{}}>
<Link to={`/tutorial/${tutorial.id}`} style={{textDecoration: 'none', color: 'inherit'}}> <Link to={`/tutorial/${tutorial.id}`} style={{textDecoration: 'none', color: 'inherit'}}>
<Paper style={{height: '150px', padding: '10px', position:'relative', overflow: 'hidden'}}> <Paper style={{height: '150px', padding: '10px', position:'relative', overflow: 'hidden'}}>
{tutorial.title} {tutorial.title}
{tutorialStatus !== 'Other' ? <div className={clsx(this.props.classes.outerDiv)} style={{width: '160px', height: '160px', border: 0}}>
<div className={clsx(this.props.classes.outerDiv, tutorialStatus === 'Error' ? this.props.classes.outerDivError : null)}> <svg style={{width: '100%', height: '100%'}}>
<div className={this.props.classes.innerDiv}> {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}/> <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> </div>
: null </div>
}
</Paper> </Paper>
</Link> </Link>
</Grid> </Grid>

13
src/reducers/tutorialReducer.js
View File

@ -1,13 +1,12 @@
import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } 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 initialState = { const initialState = {
status: window.localStorage.getItem('tutorial') ? status: window.localStorage.getItem('status') ?
JSON.parse(window.localStorage.getItem('tutorial')) JSON.parse(window.localStorage.getItem('status'))
: new Array(tutorials.length).fill({}), : tutorials.map(tutorial => {return {id: tutorial.id, tasks: new Array(tutorial.steps.filter(step => step.type === 'task').length).fill({}) };}),
level: 'instruction', currentId: null,
currentId: 0,
activeStep: 0, activeStep: 0,
change: 0 change: 0
}; };
@ -18,7 +17,7 @@ export default function(state = initialState, action){
case TUTORIAL_ERROR: case TUTORIAL_ERROR:
case TUTORIAL_XML: case TUTORIAL_XML:
// update locale storage - sync with redux store // update locale storage - sync with redux store
window.localStorage.setItem('tutorial', JSON.stringify(action.payload)); window.localStorage.setItem('status', JSON.stringify(action.payload));
return { return {
...state, ...state,
status: action.payload status: action.payload