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

template created for not deactivated blocks in the instructions

Browse Source
This commit is contained in:
Delucse 2020-09-28 15:12:19 +02:00
parent 8ec8409504
commit 4a5d24f2d1
8 changed files with 65 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Blockly/BlocklyWindow.js
View File

@ -26,14 +26,18 @@ class BlocklyWindow extends Component {
this.props.clearStats();
workspace.addChangeListener((event) => {
this.props.onChangeWorkspace(event);
// switch on that a block is displayed disabled or not depending on whether it is correctly connected
// for SVG display, a deactivated block in the display is undesirable
if(this.props.blockDisabled){
Blockly.Events.disableOrphans(event);
}
});
Blockly.svgResize(workspace);
}
componentDidUpdate(props) {
const workspace = Blockly.getMainWorkspace();
var xml = this.props.initialXml
var xml = this.props.initialXml;
// if svg is true, then the update process is done in the BlocklySvg component
if(props.initialXml !== xml && !this.props.svg){
// guarantees that the current xml-code (this.props.initialXml) is rendered

2
src/components/Home.js
View File

@ -87,7 +87,7 @@ class Home extends Component {
</IconButton>
</Tooltip>
<TrashcanButtons />
<BlocklyWindow blocklyCSS={{height: '500px'}}/>
<BlocklyWindow blocklyCSS={{height: '500px'}} blockDisabled/>
</Grid>
{this.state.codeOn ?
<Grid item xs={12} md={6}>

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

@ -41,6 +41,7 @@ class Assessment extends Component {
<Grid item xs={12} md={6} lg={8}>
<BlocklyWindow
initialXml={statusTask ? statusTask.xml ? statusTask.xml : null : null}
blockDisabled
blocklyCSS={{height: '500px'}}
/>
</Grid>

55
src/components/Tutorial/Builder/BlocklyExample.js
View File

@ -7,6 +7,7 @@ import moment from 'moment';
import localization from 'moment/locale/de';
import * as Blockly from 'blockly/core';
import { initialXml } from '../../Blockly//initialXml.js';
import BlocklyWindow from '../../Blockly/BlocklyWindow';
import { withStyles } from '@material-ui/core/styles';
@ -41,10 +42,12 @@ class BlocklyExample extends Component {
this.state={
checked: props.task ? props.task : props.value ? true : false,
input: null,
disabled: false
};
}
componentDidMount(){
moment.updateLocale('de', localization);
this.isError();
// if(this.props.task){
// this.props.setError(this.props.index, 'xml');
@ -57,15 +60,37 @@ class BlocklyExample extends Component {
() => this.isError()
);
}
if(state.checked !== this.state.checked){
if(state.checked !== this.state.checked && this.state.checked){
this.isError();
}
if(props.xml !== this.props.xml){
// check if there is at least one block, otherwise the workspace cannot be submitted
var workspace = Blockly.getMainWorkspace();
var areBlocks = workspace.getAllBlocks().length > 0;
this.setState({disabled: !areBlocks});
}
}
isError = () => {
if(this.state.checked && !this.props.value){
if(this.state.checked){
var xml = this.props.value;
// check if value is valid xml;
try{
Blockly.Xml.textToDom(xml);
this.props.deleteError(this.props.index, 'xml');
}
catch(err){
xml = initialXml;
// not valid xml, throw error in redux store
this.props.setError(this.props.index, 'xml');
}
if(!this.props.task){
// instruction can also display only one block, which does not necessarily
// have to be the initial block
xml = xml.replace('deletable="false"', 'deletable="true"');
}
this.setState({xml: xml});
}
else {
this.props.deleteError(this.props.index, 'xml');
}
@ -79,8 +104,13 @@ class BlocklyExample extends Component {
}
}
setXml = () => {
var xml = this.props.xml;
this.props.changeContent(this.props.index, 'xml', xml);
this.setState({input: moment(Date.now()).format('LTS')});
}
render() {
moment.locale('de', localization);
return (
<div style={{marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)'}}>
{!this.props.task ?
@ -100,22 +130,18 @@ class BlocklyExample extends Component {
<FormHelperText style={{lineHeight: 'initial'}} className={this.props.classes.errorColor}>{`Reiche deine Blöcke ein, indem du auf den '${this.props.task ? 'Musterlösung einreichen' : 'Beispiel einreichen'}'-Button klickst.`}</FormHelperText>
: this.state.input ? <FormHelperText style={{lineHeight: 'initial'}}>Die letzte Einreichung erfolgte um {this.state.input} Uhr.</FormHelperText> : null
: null}
{this.state.checked && !this.props.task ?
<FormHelperText style={{lineHeight: 'initial'}}>Anmerkung: Man kann den initialen Setup()- bzw. Endlosschleifen()-Block löschen. Zusätzlich ist es möglich u.a. nur einen beliebigen Block auszuwählen, ohne dass dieser als deaktiviert dargestellt wird.</FormHelperText>
: null}
{this.state.checked ? (() => {
var initialXml = this.props.value;
// check if value is valid xml;
try{
Blockly.Xml.textToDom(initialXml);
}
catch(err){
initialXml = null;
// this.props.setError(this.props.index, 'xml');
}
return(
<div style={{marginTop: '10px'}}>
<Grid container className={!this.props.value || this.props.error ? this.props.classes.errorBorder : null}>
<Grid item xs={12}>
<BlocklyWindow
initialXml={initialXml}
blockDisabled={this.props.task}
trashcan={false}
initialXml={this.state.xml}
blocklyCSS={{height: '500px'}}
/>
</Grid>
@ -125,7 +151,8 @@ class BlocklyExample extends Component {
style={{marginTop: '5px', height: '40px'}}
variant='contained'
color='primary'
onClick={() => {this.props.changeContent(this.props.index, 'xml', this.props.xml); this.setState({input: moment(Date.now()).format('LTS')})}}
disabled={this.state.disabled}
onClick={() => this.setXml()}
>
{this.props.task ? 'Musterlösung einreichen' : 'Beispiel einreichen'}
</Button>

15
src/components/Tutorial/Builder/StepType.js
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { changeContent } from '../../../actions/tutorialBuilderActions';
import { changeContent, deleteProperty } from '../../../actions/tutorialBuilderActions';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
@ -9,9 +9,15 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
class StepType extends Component {
onChange = (value) => {
this.props.changeContent(this.props.index, 'type', value);
// delete property 'xml', so that all used blocks are reset
this.props.deleteProperty(this.props.index, 'xml');
}
render() {
return (
<RadioGroup row value={this.props.value === 'task' ? 'task' : 'instruction'} onChange={(e) => {this.props.changeContent(this.props.index, 'type', e.target.value)}}>
<RadioGroup row value={this.props.value === 'task' ? 'task' : 'instruction'} onChange={(e) => this.onChange(e.target.value)}>
<FormControlLabel style={{color: 'black'}}
value="instruction"
control={<Radio color="primary" />}
@ -31,7 +37,8 @@ class StepType extends Component {
}
StepType.propTypes = {
changeContent: PropTypes.func.isRequired
changeContent: PropTypes.func.isRequired,
deleteProperty: PropTypes.func.isRequired
};
export default connect(null, { changeContent })(StepType);
export default connect(null, { changeContent, deleteProperty })(StepType);

1
src/components/Tutorial/Instruction.js
View File

@ -28,6 +28,7 @@ class Instruction extends Component {
<Grid item xs={12}>
<BlocklyWindow
svg
blockDisabled
initialXml={step.xml}
/>
</Grid>

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

@ -42,7 +42,7 @@ class Tutorial extends Component {
var step = steps ? steps[this.props.activeStep] : null;
var name = step ? `${detectWhitespacesAndReturnReadableResult(tutorial.title)}_${detectWhitespacesAndReturnReadableResult(step.headline)}` : null;
return (
!Number.isInteger(currentTutorialId) || currentTutorialId < 1 || currentTutorialId > tutorials.length ?
!Number.isInteger(currentTutorialId) || currentTutorialId < 1 || !tutorial ?
<NotFound button={{title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial'}}/>
:
<div>

2
src/components/WorkspaceFunc.js
View File

@ -125,7 +125,7 @@ class WorkspaceFunc extends Component {
this.state.file === 'xml' ? this.saveXmlFile() : this.getSvg()
}
else{
this.setState({ saveFile: true, file: filetype, open: true, title: this.state.file === 'xml' ? 'Blöcke speichern' : 'Screenshot erstellen', content: `Bitte gib einen Namen für die Bennenung der ${this.state.file === 'xml' ? 'XML' : 'SVG'}-Datei ein und bestätige diesen mit einem Klick auf \'Eingabe\'.` });
this.setState({ saveFile: true, file: filetype, open: true, title: this.state.file === 'xml' ? 'Blöcke speichern' : 'Screenshot erstellen', content: `Bitte gib einen Namen für die Bennenung der ${this.state.file === 'xml' ? 'XML' : 'SVG'}-Datei ein und bestätige diesen mit einem Klick auf 'Eingabe'.` });
}
});
}