diff --git a/src/components/Blockly/BlocklySvg.js b/src/components/Blockly/BlocklySvg.js index f20ce0c..84a4c00 100644 --- a/src/components/Blockly/BlocklySvg.js +++ b/src/components/Blockly/BlocklySvg.js @@ -42,7 +42,13 @@ class BlocklySvg extends Component { // https://github.com/google/blockly/pull/3431/files#diff-00254795773903d3c0430915a68c9521R328 cssContent += `.blocklyPath { fill-opacity: 1; - } `; + } + .blocklyPathDark { + display: flex; + } + .blocklyPathLight { + display: flex; + } `; var css = ''; var bbox = document.getElementsByClassName("blocklyBlockCanvas")[0].getBBox(); diff --git a/src/components/Tutorial/Builder/Hardware.js b/src/components/Tutorial/Builder/Hardware.js index b22b0d0..a47a24d 100644 --- a/src/components/Tutorial/Builder/Hardware.js +++ b/src/components/Tutorial/Builder/Hardware.js @@ -15,7 +15,7 @@ import FormLabel from '@material-ui/core/FormLabel'; const styles = theme => ({ multiGridListTile: { - background: "#4EAF47", + background: theme.palette.primary.main, opacity: 0.9, height: '30px' }, diff --git a/src/components/Tutorial/Hardware.js b/src/components/Tutorial/Hardware.js index 001ff9e..35602bb 100644 --- a/src/components/Tutorial/Hardware.js +++ b/src/components/Tutorial/Hardware.js @@ -27,7 +27,7 @@ const styles = theme => ({ color: theme.palette.text.primary }, multiGridListTile: { - background: "#4EAF47", + background: theme.palette.primary.main, opacity: 0.9, height: '30px' }, @@ -95,7 +95,7 @@ class Hardware extends Component { >
{this.state.hardwareInfo.name} - Weitere Informationen zur Hardware-Komponente findest du hier. + Weitere Informationen zur Hardware-Komponente findest du hier.
diff --git a/src/components/Tutorial/StepperHorizontal.js b/src/components/Tutorial/StepperHorizontal.js index b4d87c0..6853550 100644 --- a/src/components/Tutorial/StepperHorizontal.js +++ b/src/components/Tutorial/StepperHorizontal.js @@ -51,6 +51,7 @@ class StepperHorizontal extends Component { render() { var tutorialId = this.props.currentTutorialId; + var tutorialIndex = this.props.currentTutorialIndex; var status = this.props.status.filter(status => status.id === tutorialId)[0]; var tasks = status.tasks; var error = tasks.filter(task => task.type === 'error').length > 0; @@ -69,8 +70,8 @@ class StepperHorizontal extends Component { : null}
@@ -81,8 +82,8 @@ class StepperHorizontal extends Component {
@@ -95,13 +96,15 @@ class StepperHorizontal extends Component { StepperHorizontal.propTypes = { status: PropTypes.array.isRequired, change: PropTypes.number.isRequired, - currentTutorialId: PropTypes.number.isRequired + currentTutorialId: PropTypes.number.isRequired, + currentTutorialIndex: PropTypes.number.isRequired }; const mapStateToProps = state => ({ change: state.tutorial.change, status: state.tutorial.status, - currentTutorialId: state.tutorial.currentId + currentTutorialId: state.tutorial.currentId, + currentTutorialIndex: state.tutorial.currentIndex }); export default connect(mapStateToProps, null)(withRouter(withStyles(styles, { withTheme: true })(StepperHorizontal))); diff --git a/src/components/WorkspaceFunc.js b/src/components/WorkspaceFunc.js index 0b74f0c..5d380d2 100644 --- a/src/components/WorkspaceFunc.js +++ b/src/components/WorkspaceFunc.js @@ -106,7 +106,13 @@ class WorkspaceFunc extends Component { // https://github.com/google/blockly/pull/3431/files#diff-00254795773903d3c0430915a68c9521R328 cssContent += `.blocklyPath { fill-opacity: 1; - } `; + } + .blocklyPathDark { + display: flex; + } + .blocklyPathLight { + display: flex; + } `; var css = ''; diff --git a/src/data/Wenn-DannBedingungen.json b/src/data/Wenn-DannBedingungen.json deleted file mode 100644 index 8ade20c..0000000 --- a/src/data/Wenn-DannBedingungen.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "id": 1602160884767, - "title": "Wenn-Dann Bedingungen", - "steps": [ - { - "id": 1, - "type": "instruction", - "headline": "Wenn-Dann-Was?", - "text": "In diesem Tutorial lernst du die Verwendung von Wenn-Dann Bedingungen kennen. Die Wenn-Dann Bedingung ist eine der wichtigsten Kontrollstrukturen in der Programmierung und hilft dir dabei auf bestimmte Zustände einzugehen. ", - "hardware": [ - "senseboxmcu", - "breadboard", - "jst-adapter", - "resistor-470ohm" - ], - "requirements": [ - 1602160534286 - ] - }, - { - "id": 2, - "type": "instruction", - "headline": "Aufbau der Hardware", - "text": "Verbinde die LED mit Hilfe des JST-Adapter Kabel und dem 470 Ohm Widerstand mit einem der 3 digital/analog Ports der senseBox MCU. ", - "media": { - "picture": "01_circuit.png" - } - }, - { - "id": 3, - "type": "instruction", - "headline": "Die Wenn-Dann Bedingung", - "text": "Eine Wenn-Dann Bedingung kann dazu verwendet werden bestimmten Zeilen Code auszuführen, wenn eine bestimmte Bedingung erfüllt ist. \n\nwenn Bedingung dann\n Anweisung(en)\nende\n\nDas Beispiel unten zeigt dir wie eine Wenn-Dann Bedingung aufgebaut ist. Es kann zum Beispiel die Temperatur mit einem Wert verglichen werden. Ist dieser Vergleich wahr (true), dann werden die Blöcke ausgeführt, die neben \"dann\" stehen ausgeführt. Ist die Bedingung nicht erfüllt (false) dann wird einfach der Programmcode unterhalb der Wenn-Dann Bedingung ausgeführt.\n", - "xml": "\n \n \n \n \n \n EQ\n \n \n Temperature\n \n \n \n \n \n \n \n \n 0\n \n" - }, - { - "id": 4, - "type": "task", - "headline": "Leuchten der LED auf Knopfdruck", - "text": "Lasse die LED leuchten, wenn der \"Button\" auf der senseBox MCU gedrückt wird. Den Block für den Button findest du unter \"Sensoren\".", - "xml": "\n \n \n \n \n \n \n EQ\n \n \n isPressed\n 0\n \n \n \n \n TRUE\n \n \n \n \n \n \n 1\n HIGH\n \n \n \n \n EQ\n \n \n isPressed\n 0\n \n \n \n \n FALSE\n \n \n \n \n \n \n 1\n LOW\n \n \n \n \n \n" - } - ] -} \ No newline at end of file diff --git a/src/data/hardware.json b/src/data/hardware.json index 65c310a..3313f63 100644 --- a/src/data/hardware.json +++ b/src/data/hardware.json @@ -7,7 +7,7 @@ }, { "id": "breadboard", - "name": "Steckboard", + "name": "Breadboard", "src": "breadboard.png", "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html" }, diff --git a/src/data/AnzeigeVonMesswertenAufDemDisplay.json b/src/data/tutorial/AnzeigeVonMesswertenAufDemDisplay.json similarity index 100% rename from src/data/AnzeigeVonMesswertenAufDemDisplay.json rename to src/data/tutorial/AnzeigeVonMesswertenAufDemDisplay.json diff --git a/src/data/ErsteSchritte.json b/src/data/tutorial/ErsteSchritte.json similarity index 100% rename from src/data/ErsteSchritte.json rename to src/data/tutorial/ErsteSchritte.json diff --git a/src/data/tutorial/VerwendungVonVariablen.json b/src/data/tutorial/VerwendungVonVariablen.json new file mode 100644 index 0000000..3f883ba --- /dev/null +++ b/src/data/tutorial/VerwendungVonVariablen.json @@ -0,0 +1 @@ +{"id":1602162172424,"title":"Verwendung von Variablen","steps":[{"id":1,"type":"instruction","headline":"Variablen","text":"Variablen, auch Platzhalter genannt, werden in der Informatik für verschiedene Dinge genutzt. Sie sind eine Art Kiste, die mit einem Namen versehen ist. In dieser Kiste kannst du verschiedene Dinge hinterlegen (z.B. Zahlen und Texte) und diese später wieder abrufen. ","hardware":["senseboxmcu","oled","jst-jst","hdc1080"],"requirements":[1602160534286]},{"id":2,"type":"instruction","headline":"Aufbau der Hardware","text":"Verbinde das Display und den Temperatur- und Luftfeuchtigkeitssensor jeweils mit einem JST-JST Kabel mit einem der 5 I2C Ports auf der senseBox MCU."},{"id":3,"type":"instruction","headline":"Variablen in Blockly","text":"Variablen können ihren Wert im Laufe des Programmes verändern, sodass du zum Beispiel der Variable „Temperatur“ immer den aktuell gemessenen Temperaturwert zuweist. Eine Variablen besitzt immer einer bestimmten Datentyp. Der Datentyp gibt im Endeffekt an, wie groß die Kiste ist und wie der Wert aussehen kann, der in der Variable gespeichert werden kann. \n\nVariablen - Datentypen\nJe nachdem, was du in einer Variable speichern möchtest, musst du den richten Datentyp auswählen.\nZeichen: Für einzelne Textzeichen\nText: Für ganze Wörter oder Sätze\nZahl: Für Zahlen von -32768 bis +32768\nGroße Zahl: Für Zahlen von -2147483648 bis\n +2147483648\nDezimalzahl: Für Kommazahlen (z.B. 25,3)","xml":"\n \n Temperatur\n \n \n \n \n \n \n \n Temperatur\n \n \n Temperature\n \n \n \n \n \n \n WHITE,BLACK\n 1\n 0\n 0\n \n \n Temperatur\n \n \n \n \n \n \n \n \n \n"},{"id":4,"type":"task","headline":"Aufgabe 1:","text":"Erste 2 Variablen vom Typ \"Kommazahl\" und weise die Werte für Temperatur und Luftfeuchtigkeit zu. Lasse anschließend den Wert der Variablen auf dem Display anzeigen.","xml":"\n \n Temperatur\n Luftfeuchte\n \n \n \n \n \n \n \n Temperatur\n \n \n Temperature\n \n \n \n \n Luftfeuchte\n \n \n Temperature\n \n \n \n \n \n \n WHITE,BLACK\n 1\n 0\n 0\n \n \n Luftfeuchte\n \n \n \n \n WHITE,BLACK\n 1\n 0\n 20\n \n \n Temperatur\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n"}]} \ No newline at end of file diff --git a/src/data/tutorial/Wenn-DannBedingungen.json b/src/data/tutorial/Wenn-DannBedingungen.json new file mode 100644 index 0000000..33dba31 --- /dev/null +++ b/src/data/tutorial/Wenn-DannBedingungen.json @@ -0,0 +1 @@ +{"id":1602160884767,"title":"Wenn-Dann Bedingungen","steps":[{"id":1,"type":"instruction","headline":"Wenn-Dann-Was?","text":"In diesem Tutorial lernst du die Verwendung von Wenn-Dann Bedingungen kennen. Die Wenn-Dann Bedingung ist eine der wichtigsten Kontrollstrukturen in der Programmierung und hilft dir dabei auf bestimmte Zustände einzugehen. ","hardware":["senseboxmcu","breadboard","jst-adapter","resistor-470ohm"],"requirements":[1602160534286]},{"id":2,"type":"instruction","headline":"Aufbau der Hardware","text":"Verbinde die LED mit Hilfe des JST-Adapter Kabel und dem 470 Ohm Widerstand mit einem der 3 digital/analog Ports der senseBox MCU. ","media":{"picture":"01_circuit.png"}},{"id":3,"type":"instruction","headline":"Die Wenn-Dann Bedingung","text":"Eine Wenn-Dann Bedingung kann dazu verwendet werden bestimmten Zeilen Code auszuführen, wenn eine bestimmte Bedingung erfüllt ist. \n\nwenn Bedingung dann\n Anweisung(en)\nende\n\nDas Beispiel unten zeigt dir wie eine Wenn-Dann Bedingung aufgebaut ist. Es kann zum Beispiel die Temperatur mit einem Wert verglichen werden. Ist dieser Vergleich wahr (true), dann werden die Blöcke ausgeführt, die neben \"dann\" stehen ausgeführt. Ist die Bedingung nicht erfüllt (false) dann wird einfach der Programmcode unterhalb der Wenn-Dann Bedingung ausgeführt.\n","xml":"\n \n \n \n \n \n EQ\n \n \n Temperature\n \n \n \n \n 0\n \n \n \n \n \n \n \n"},{"id":4,"type":"task","headline":"Leuchten der LED auf Knopfdruck","text":"Lasse die LED leuchten, wenn der \"Button\" auf der senseBox MCU gedrückt wird. Den Block für den Button findest du unter \"Sensoren\".","xml":"\n \n \n \n \n \n \n EQ\n \n \n isPressed\n 0\n \n \n \n \n TRUE\n \n \n \n \n \n \n 1\n HIGH\n \n \n \n \n EQ\n \n \n isPressed\n 0\n \n \n \n \n FALSE\n \n \n \n \n \n \n 1\n LOW\n \n \n \n \n \n"}]} \ No newline at end of file diff --git a/src/data/loops_01.json b/src/data/tutorial/loops_01.json similarity index 100% rename from src/data/loops_01.json rename to src/data/tutorial/loops_01.json diff --git a/src/data/tutorials.js b/src/data/tutorials.js index 67471a9..e2a7a27 100644 --- a/src/data/tutorials.js +++ b/src/data/tutorials.js @@ -1,10 +1,9 @@ - - let tutorials = [ - require('./ErsteSchritte.json'), - require('./loops_01.json'), - require('./Wenn-DannBedingungen.json'), - require('./variablen_01.json'), - require('./AnzeigeVonMesswertenAufDemDisplay.json') + require('./tutorial/ErsteSchritte.json'), + require('./tutorial/loops_01.json'), + require('./tutorial/Wenn-DannBedingungen.json'), + require('./tutorial/VerwendungVonVariablen.json'), + require('./tutorial/AnzeigeVonMesswertenAufDemDisplay.json') ] -module.exports = tutorials; \ No newline at end of file + +module.exports = tutorials; diff --git a/src/data/variablen_01.json b/src/data/variablen_01.json deleted file mode 100644 index 7f73f99..0000000 --- a/src/data/variablen_01.json +++ /dev/null @@ -1,41 +0,0 @@ -{ - "id": 1602162172424, - "title": "Verwendung von Variablen", - "steps": [ - { - "id": 1, - "type": "instruction", - "headline": "Variablen", - "text": "Variablen, auch Platzhalter genannt, werden in der Informatik für verschiedene Dinge genutzt. Sie sind eine Art Kiste, die mit einem Namen versehen ist. In dieser Kiste kannst du verschiedene Dinge hinterlegen (z.B. Zahlen und Texte) und diese später wieder abrufen. ", - "hardware": [ - "senseboxmcu", - "oled", - "jst-jst", - "hdc1080" - ], - "requirements": [ - 1602160534286 - ] - }, - { - "id": 2, - "type": "instruction", - "headline": "Aufbau der Hardware", - "text": "Verbinde das Display und den Temperatur- und Luftfeuchtigkeitssensor jeweils mit einem JST-JST Kabel mit einem der 5 I2C Ports auf der senseBox MCU." - }, - { - "id": 3, - "type": "instruction", - "headline": "Variablen in Blockly", - "text": "Variablen können ihren Wert im Laufe des Programmes verändern, sodass du zum Beispiel der Variable „Temperatur“ immer den aktuell gemessenen Temperaturwert zuweist. Eine Variablen besitzt immer einer bestimmten Datentyp. Der Datentyp gibt im Endeffekt an, wie groß die Kiste ist und wie der Wert aussehen kann, der in der Variable gespeichert werden kann. \n\nVariablen - Datentypen\nJe nachdem, was du in einer Variable speichern möchtest, musst du den richten Datentyp auswählen.\nZeichen: Für einzelne Textzeichen\nText: Für ganze Wörter oder Sätze\nZahl: Für Zahlen von -32768 bis +32768\nGroße Zahl: Für Zahlen von -2147483648 bis\n +2147483648\nDezimalzahl: Für Kommazahlen (z.B. 25,3)", - "xml": "\n \n Temperatur\n \n \n \n \n \n \n \n Temperatur\n \n \n Temperature\n \n \n \n \n \n \n WHITE,BLACK\n 1\n 0\n 0\n \n \n \n \n \n \n \n \n Temperatur\n \n" - }, - { - "id": 4, - "type": "task", - "headline": "Aufgabe 1:", - "text": "Erste 2 Variablen vom Typ \"Kommazahl\" und weise die Werte für Temperatur und Luftfeuchtigkeit zu. Lasse anschließend den Wert der Variablen auf dem Display anzeigen.", - "xml": "\n \n Temperatur\n Luftfeuchte\n \n \n \n \n \n \n \n Temperatur\n \n \n Temperature\n \n \n \n \n Luftfeuchte\n \n \n Temperature\n \n \n \n \n \n \n WHITE,BLACK\n 1\n 0\n 0\n \n \n Luftfeuchte\n \n \n \n \n WHITE,BLACK\n 1\n 0\n 20\n \n \n Temperatur\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n" - } - ] -} \ No newline at end of file diff --git a/src/reducers/tutorialReducer.js b/src/reducers/tutorialReducer.js index c0eb18b..c231f78 100644 --- a/src/reducers/tutorialReducer.js +++ b/src/reducers/tutorialReducer.js @@ -41,6 +41,7 @@ const initialStatus = () => { const initialState = { status: initialStatus(), currentId: null, + currentIndex: null, activeStep: 0, change: 0 }; @@ -64,7 +65,8 @@ export default function (state = initialState, action) { case TUTORIAL_ID: return { ...state, - currentId: action.payload + currentId: action.payload, + currentIndex: tutorials.findIndex(tutorial => tutorial.id === action.payload) } case TUTORIAL_STEP: return {