display of the blocks as SVG in instruction-component

src/components/Tutorial/Assessment.js

@@ -39,7 +39,10 @@ class Assessment extends Component {
         <div style={{float: 'right', height: '40px'}}><WorkspaceFunc solutionCheck/></div>
         <Grid container spacing={2} style={{marginBottom: '5px'}}>
           <Grid item xs={12} md={6} lg={8}>
-            <BlocklyWindow initialXml={statusTask ? statusTask.xml ? statusTask.xml : null : null}/>
+            <BlocklyWindow
+              initialXml={statusTask ? statusTask.xml ? statusTask.xml : null : null}
+              blocklyCSS={{height: '500px'}}
+            />
           </Grid>
           <Grid item xs={12} md={6} lg={4} style={isWidthDown('sm', this.props.width) ? {height: 'max-content'} : {}}>
             <Card style={{height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px'}}>

src/components/Tutorial/Builder/BlocklyExample.js

@@ -114,7 +114,10 @@ class BlocklyExample extends Component {
             <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}/>
+                  <BlocklyWindow
+                    initialXml={initialXml}
+                    blocklyCSS={{height: '500px'}}
+                  />
                 </Grid>
               </Grid>
               <Button

src/components/Tutorial/Instruction.js

@@ -27,12 +27,7 @@ class Instruction extends Component {
         <Grid container spacing={2} style={{marginBottom: '5px'}}>
           <Grid item xs={12}>
             <BlocklyWindow
-              trashcan={false}
-              readOnly={true}
-              zoomControls={false}
-              grid={false}
-              move={false}
-              blocklyCSS={{minHeight: '300px'}}
+              svg
               initialXml={step.xml}
             />
           </Grid>