add assessment tour

This commit is contained in:
Delucse 2020-12-15 16:09:29 +01:00
parent dce73e6a54
commit e4bab3d9ca
5 changed files with 16 additions and 12 deletions

View File

@ -94,7 +94,7 @@ class Home extends Component {
<div style={{ float: 'left', height: '40px', position: 'relative' }}><WorkspaceStats /></div> <div style={{ float: 'left', height: '40px', position: 'relative' }}><WorkspaceStats /></div>
: null : null
} }
<div style={{ float: 'right', height: '40px', marginBottom: '20px' }}> <div className='workspaceFunc' style={{ float: 'right', height: '40px', marginBottom: '20px' }}>
<WorkspaceFunc project={this.props.project} projectType={this.props.projectType}/> <WorkspaceFunc project={this.props.project} projectType={this.props.projectType}/>
</div> </div>
<Grid container spacing={2}> <Grid container spacing={2}>
@ -109,10 +109,12 @@ class Home extends Component {
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<TrashcanButtons /> <TrashcanButtons />
{this.props.project ? <div className='blocklyWindow'>
< BlocklyWindow blocklyCSS={{ height: '80vH' }} initialXml={this.props.project.xml} /> {this.props.project ?
: < BlocklyWindow blocklyCSS={{ height: '80vH' }} /> < BlocklyWindow blocklyCSS={{ height: '80vH' }} initialXml={this.props.project.xml} />
} : < BlocklyWindow blocklyCSS={{ height: '80vH' }} />
}
</div>
</Grid> </Grid>
{this.state.codeOn ? {this.state.codeOn ?
<Grid item xs={12} md={4}> <Grid item xs={12} md={4}>

View File

@ -85,6 +85,7 @@ class Navbar extends Component {
color="inherit" color="inherit"
onClick={this.toggleDrawer} onClick={this.toggleDrawer}
style={{ margin: '0 10px' }} style={{ margin: '0 10px' }}
className="MenuButton"
> >
<FontAwesomeIcon icon={faBars} /> <FontAwesomeIcon icon={faBars} />
</IconButton> </IconButton>
@ -122,7 +123,7 @@ class Navbar extends Component {
onClick={() => { this.openTour(); }} onClick={() => { this.openTour(); }}
style={{ margin: '0 30px 0 auto' }} style={{ margin: '0 30px 0 auto' }}
> >
<FontAwesomeIcon icon={faQuestionCircle} size="3x" /> <FontAwesomeIcon icon={faQuestionCircle} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
: null} : null}

View File

@ -13,17 +13,18 @@ export const home = [
}, },
{ {
selector: ".saveBlocks", selector: ".saveBlocks",
content: 'Speicher deine Blöcke auf dem Computer', content: 'Speichere deine Blöcke auf dem Computer.',
}, },
{ {
selector: ".MenuButton", selector: ".MenuButton",
content: 'Im Menü findest du Tutorials und eine Gallery mit verschiedenen Beispiel Programmen.', content: 'Im Menü findest du Tutorials und eine Gallery mit verschiedenen Beispiel Programmen.',
}, }
]; ];
export const assessment = [ export const assessment = [
// to be continued...
{ {
selector: '.workspaceFunc', selector: '.assessmentDiv',
content: 'Hier findest du alle Buttons um dein Programm zu übertragen, zu speichern oder zu teilen', content: 'Hier kannst du eine Aufgabe lösen und kontrollieren.',
} }
]; ];

View File

@ -33,7 +33,7 @@ class Assessment extends Component {
var statusTask = status.tasks[taskIndex]; var statusTask = status.tasks[taskIndex];
return ( return (
<div style={{ width: '100%' }}> <div className="assessmentDiv" style={{ width: '100%' }}>
<Typography variant='h4' style={{ float: 'left', marginBottom: '5px', height: '40px', display: 'table' }}>{currentTask.headline}</Typography> <Typography variant='h4' style={{ float: 'left', marginBottom: '5px', height: '40px', display: 'table' }}>{currentTask.headline}</Typography>
<div style={{ float: 'right', height: '40px' }}><WorkspaceFunc assessment /></div> <div style={{ float: 'right', height: '40px' }}><WorkspaceFunc assessment /></div>
<Grid container spacing={2} style={{ marginBottom: '5px' }}> <Grid container spacing={2} style={{ marginBottom: '5px' }}>

View File

@ -44,7 +44,7 @@ class DownloadProject extends Component {
<div style={this.props.style}> <div style={this.props.style}>
<Tooltip title={Blockly.Msg.tooltip_download_project} arrow> <Tooltip title={Blockly.Msg.tooltip_download_project} arrow>
<IconButton <IconButton
className={this.props.classes.button} className={`saveBlocks ${this.props.classes.button}`}
onClick={() => this.downloadXmlFile()} onClick={() => this.downloadXmlFile()}
> >
<FontAwesomeIcon icon={faFileDownload} size="xs" /> <FontAwesomeIcon icon={faFileDownload} size="xs" />