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

example of multilanguage tour

Browse Source
This commit is contained in:
Delucse 2020-12-15 16:18:47 +01:00
parent e4bab3d9ca
commit 1e9361b730
2 changed files with 40 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Navbar.js
View File

@ -128,7 +128,7 @@ class Navbar extends Component {
</Tooltip> </Tooltip>
: null} : null}
<Tour <Tour
steps={isHome ? home : assessment} steps={isHome ? home() : assessment()}
isOpen={this.state.isTourOpen} isOpen={this.state.isTourOpen}
onRequestClose={() => { this.closeTour(); }} onRequestClose={() => { this.closeTour(); }}
/> />

68
src/components/Tour.js
View File

@ -1,30 +1,40 @@
export const home = [ import * as Blockly from 'blockly/core';
{
selector: '.workspaceFunc',
content: 'Hier findest du alle Buttons um dein Programm zu übertragen, zu speichern oder zu teilen',
},
{
selector: ".blocklyWindow",
content: 'Dies ist deine Arbeitsfläche.',
},
{
selector: ".blocklyToolboxDiv",
content: 'In der Toolbox befinden sich alle Blöcke. Verbinde diese in der Arbeitsfläche und erstelle dein Programmcode',
},
{
selector: ".saveBlocks",
content: 'Speichere deine Blöcke auf dem Computer.',
},
{
selector: ".MenuButton",
content: 'Im Menü findest du Tutorials und eine Gallery mit verschiedenen Beispiel Programmen.',
}
];
export const assessment = [ export const home = () => {
// to be continued... return [
{ {
selector: '.assessmentDiv', selector: '.workspaceFunc',
content: 'Hier kannst du eine Aufgabe lösen und kontrollieren.', content: `${Blockly.Msg.settings_head}`
} },
]; {
selector: '.workspaceFunc',
content: 'Hier findest du alle Buttons um dein Programm zu übertragen, zu speichern oder zu teilen',
},
{
selector: ".blocklyWindow",
content: 'Dies ist deine Arbeitsfläche.',
},
{
selector: ".blocklyToolboxDiv",
content: 'In der Toolbox befinden sich alle Blöcke. Verbinde diese in der Arbeitsfläche und erstelle dein Programmcode',
},
{
selector: ".saveBlocks",
content: 'Speichere deine Blöcke auf dem Computer.',
},
{
selector: ".MenuButton",
content: 'Im Menü findest du Tutorials und eine Gallery mit verschiedenen Beispiel Programmen.',
}
];
};
export const assessment = () => {
return [
// to be continued...
{
selector: '.assessmentDiv',
content: 'Hier kannst du eine Aufgabe lösen und kontrollieren.',
}
];
};