embed picture

src/components/Tutorial/Builder/BlocklyExample.js

@@ -134,7 +134,7 @@ class BlocklyExample extends Component {
         {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}
-        // ensure that the correct xml-file is displayed in the workspace
+        {/* ensure that the correct xml-file is displayed in the workspace */}
         {this.state.checked && this.state.xml? (() => {
           return(
             <div style={{marginTop: '10px'}}>

src/components/Tutorial/Instruction.js

@@ -23,6 +23,11 @@ class Instruction extends Component {
           <Hardware picture={step.hardware}/> : null}
         {areRequirements > 0 ?
           <Requirement tutorialIds={step.requirements}/> : null}
+        {step.picture ?
+          <div style={{display: 'flex', justifyContent: 'center', marginBottom: '5px'}}>
+            <img src={`/media/tutorial/${step.picture}`} alt='' style={{maxWidth: '100%'}}/>
+          </div>
+        : null}
         {step.xml ?
         <Grid container spacing={2} style={{marginBottom: '5px'}}>
           <Grid item xs={12}>