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

adjustment of the tutorial component and all dependencies to the new tutorial.json

Browse Source
This commit is contained in:
Delucse
2020-09-11 10:13:33 +02:00
parent 33445cf67c
commit 6c3709fde8
14 changed files with 368 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tutorial/SolutionCheck.js
+40 -41
View File
@@ -3,11 +3,9 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { tutorialCheck } from '../../actions/tutorialActions';
import * as Blockly from 'blockly/core';
import Compile from '../Compile';
import { tutorials } from './tutorials';
import tutorials from './tutorials.json';
import { checkXml } from './compareXml';
import { withStyles } from '@material-ui/core/styles';
@@ -49,51 +47,50 @@ class SolutionCheck extends Component {
}
check = () => {
const workspace = Blockly.getMainWorkspace();
var msg = checkXml(tutorials[this.props.currentTutorialId].solution, this.props.xml);
const tutorial = tutorials.filter(tutorial => tutorial.id === this.props.currentTutorialId)[0];
const step = tutorial.steps[this.props.activeStep];
var msg = checkXml(step.xml, this.props.xml);
this.props.tutorialCheck(msg.type);
this.setState({ msg, open: true });
}
render() {
return (
tutorials[this.props.currentTutorialId].test ?
<div>
<Tooltip title='Lösung kontrollieren'>
<IconButton
className={this.props.classes.compile}
style={{width: '40px', height: '40px', position: 'absolute', top: 8, right: 8, zIndex: 21 }}
onClick={() => this.check()}
>
<FontAwesomeIcon icon={faPlay} size="xs"/>
</IconButton>
</Tooltip>
<Dialog fullWidth maxWidth={'sm'} onClose={this.toggleDialog} open={this.state.open} style={{zIndex: 9999999}}>
<DialogTitle>{this.state.msg.type === 'error' ? 'Fehler' : 'Erfolg'}</DialogTitle>
<DialogContent dividers>
{this.state.msg.text}
{this.state.msg.type === 'success' ?
<div style={{marginTop: '20px', display: 'flex'}}>
<Compile />
<Button
style={{marginLeft: '10px'}}
variant="contained"
color="primary"
onClick={() => {this.toggleDialog(); this.props.history.push(`/tutorial/${this.props.currentTutorialId+2}`)}}
>
nächstes Tutorial
</Button>
</div>
: null}
</DialogContent>
<DialogActions>
<Button onClick={this.toggleDialog} color="primary">
Schließen
<div>
<Tooltip title='Lösung kontrollieren'>
<IconButton
className={this.props.classes.compile}
style={{width: '40px', height: '40px', position: 'absolute', top: 8, right: 8, zIndex: 21 }}
onClick={() => this.check()}
>
<FontAwesomeIcon icon={faPlay} size="xs"/>
</IconButton>
</Tooltip>
<Dialog fullWidth maxWidth={'sm'} onClose={this.toggleDialog} open={this.state.open} style={{zIndex: 9999999}}>
<DialogTitle>{this.state.msg.type === 'error' ? 'Fehler' : 'Erfolg'}</DialogTitle>
<DialogContent dividers>
{this.state.msg.text}
{this.state.msg.type === 'success' ?
<div style={{marginTop: '20px', display: 'flex'}}>
<Compile />
<Button
style={{marginLeft: '10px'}}
variant="contained"
color="primary"
onClick={() => {this.toggleDialog(); this.props.history.push(`/tutorial/${this.props.currentTutorialId+2}`)}}
>
nächstes Tutorial
</Button>
</DialogActions>
</Dialog>
</div>
: null
</div>
: null}
</DialogContent>
<DialogActions>
<Button onClick={this.toggleDialog} color="primary">
Schließen
</Button>
</DialogActions>
</Dialog>
</div>
);
};
}
@@ -102,11 +99,13 @@ class SolutionCheck extends Component {
SolutionCheck.propTypes = {
tutorialCheck: PropTypes.func.isRequired,
currentTutorialId: PropTypes.number,
activeStep: PropTypes.number.isRequired,
xml: PropTypes.string.isRequired
};
const mapStateToProps = state => ({
currentTutorialId: state.tutorial.currentId,
activeStep: state.tutorial.activeStep,
xml: state.workspace.code.xml
});