update variable names
This commit is contained in:
Mario Pesch
@@ -1,20 +1,20 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { workspaceName } from '../../actions/workspaceActions';
|
||||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { connect } from "react-redux";
|
||||
import { workspaceName } from "../../actions/workspaceActions";
|
||||
|
||||
import BlocklyWindow from '../Blockly/BlocklyWindow';
|
||||
import CodeViewer from '../CodeViewer';
|
||||
import WorkspaceFunc from '../Workspace/WorkspaceFunc';
|
||||
import BlocklyWindow from "../Blockly/BlocklyWindow";
|
||||
import CodeViewer from "../CodeViewer";
|
||||
import WorkspaceFunc from "../Workspace/WorkspaceFunc";
|
||||
|
||||
import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Card from '@material-ui/core/Card';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import * as Blockly from 'blockly'
|
||||
import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Card from "@material-ui/core/Card";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import * as Blockly from "blockly";
|
||||
import { initialXml } from "../Blockly/initialXml";
|
||||
|
||||
class Assessment extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
this.props.workspaceName(this.props.name);
|
||||
}
|
||||
@@ -28,48 +28,90 @@ class Assessment extends Component {
|
||||
render() {
|
||||
var tutorialId = this.props.tutorial._id;
|
||||
var currentTask = this.props.step;
|
||||
var status = this.props.status.filter(status => status._id === tutorialId)[0];
|
||||
var taskIndex = status.tasks.findIndex(task => task._id === currentTask._id);
|
||||
var status = this.props.status.filter(
|
||||
(status) => status._id === tutorialId
|
||||
)[0];
|
||||
var taskIndex = status.tasks.findIndex(
|
||||
(task) => task._id === currentTask._id
|
||||
);
|
||||
var statusTask = status.tasks[taskIndex];
|
||||
|
||||
return (
|
||||
<div className="assessmentDiv" style={{ width: '100%' }}>
|
||||
<Typography variant='h4' style={{ float: 'left', marginBottom: '5px', height: '40px', display: 'table' }}>{currentTask.headline}</Typography>
|
||||
<div style={{ float: 'right', height: '40px' }}><WorkspaceFunc assessment /></div>
|
||||
<Grid container spacing={2} style={{ marginBottom: '5px' }}>
|
||||
<div className="assessmentDiv" style={{ width: "100%" }}>
|
||||
<Typography
|
||||
variant="h4"
|
||||
style={{
|
||||
float: "left",
|
||||
marginBottom: "5px",
|
||||
height: "40px",
|
||||
display: "table",
|
||||
}}
|
||||
>
|
||||
{currentTask.headline}
|
||||
</Typography>
|
||||
<div style={{ float: "right", height: "40px" }}>
|
||||
<WorkspaceFunc assessment />
|
||||
</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}
|
||||
initialXml={initialXml}
|
||||
blockDisabled
|
||||
blocklyCSS={{ height: '65vH' }}
|
||||
blocklyCSS={{ height: "65vH" }}
|
||||
/>
|
||||
</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' }}>
|
||||
<Typography variant='h5'>{Blockly.Msg.tutorials_assessment_task}</Typography>
|
||||
<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",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5">
|
||||
{Blockly.Msg.tutorials_assessment_task}
|
||||
</Typography>
|
||||
<Typography>{currentTask.text}</Typography>
|
||||
</Card>
|
||||
<div style={isWidthDown('sm', this.props.width) ? { height: '500px' } : { height: '50%' }}>
|
||||
<div
|
||||
style={
|
||||
isWidthDown("sm", this.props.width)
|
||||
? { height: "500px" }
|
||||
: { height: "50%" }
|
||||
}
|
||||
>
|
||||
<CodeViewer />
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Assessment.propTypes = {
|
||||
status: PropTypes.array.isRequired,
|
||||
change: PropTypes.number.isRequired,
|
||||
workspaceName: PropTypes.func.isRequired,
|
||||
tutorial: PropTypes.object.isRequired
|
||||
tutorial: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
const mapStateToProps = (state) => ({
|
||||
change: state.tutorial.change,
|
||||
status: state.tutorial.status,
|
||||
tutorial: state.tutorial.tutorials[0]
|
||||
tutorial: state.tutorial.tutorials[0],
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { workspaceName })(withWidth()(Assessment));
|
||||
export default connect(mapStateToProps, { workspaceName })(
|
||||
withWidth()(Assessment)
|
||||
);
|
||||
|
||||
@@ -1,57 +1,95 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, { Component } from "react";
|
||||
|
||||
import Hardware from './Hardware';
|
||||
import Requirement from './Requirement';
|
||||
import BlocklyWindow from '../Blockly/BlocklyWindow';
|
||||
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import Hardware from "./Hardware";
|
||||
import Requirement from "./Requirement";
|
||||
import BlocklyWindow from "../Blockly/BlocklyWindow";
|
||||
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
|
||||
class Instruction extends Component {
|
||||
|
||||
render() {
|
||||
var step = this.props.step;
|
||||
var isHardware = step.hardware && step.hardware.length > 0;
|
||||
var areRequirements = step.requirements && step.requirements.length > 0;
|
||||
return (
|
||||
<div>
|
||||
<Typography variant='h4' style={{ marginBottom: '5px' }}>{step.headline}</Typography>
|
||||
<Typography style={isHardware ? {} : { marginBottom: '5px' }}><ReactMarkdown className={'tutorial'} linkTarget={'_blank'} skipHtml={false}>{step.text}</ReactMarkdown></Typography>
|
||||
{isHardware ?
|
||||
<Hardware picture={step.hardware} /> : null}
|
||||
{areRequirements > 0 ?
|
||||
<Requirement requirements={step.requirements} /> : null}
|
||||
{step.media ?
|
||||
step.media.picture ?
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: '5px' }}>
|
||||
<img src={`${process.env.REACT_APP_BLOCKLY_API}/media/${step.media.picture.path}`} alt='' style={{ maxHeight: '40vH', maxWidth: '100%' }} />
|
||||
</div>
|
||||
: step.media.youtube ?
|
||||
/*16:9; width: 800px; height: width/16*9=450px*/
|
||||
<div style={{ maxWidth: '800px', margin: 'auto' }}>
|
||||
<div style={{ position: 'relative', height: 0, paddingBottom: 'calc(100% / 16 * 9)' }}>
|
||||
<iframe title={step.media.youtube} style={{ position: 'absolute', top: '0', left: '0', width: '100%', maxWidth: '800px', height: '100%', maxHeight: '450px' }} src={`https://www.youtube.com/embed/${step.media.youtube}`} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
|
||||
</div>
|
||||
</div>
|
||||
: null
|
||||
: null}
|
||||
{step.xml ?
|
||||
<Grid container spacing={2} style={{ marginBottom: '5px' }}>
|
||||
<Grid item xs={12} style={{display: 'flex', justifyContent: 'center'}}>
|
||||
<BlocklyWindow
|
||||
svg
|
||||
blockDisabled
|
||||
initialXml={step.xml}
|
||||
<Typography variant="h4" style={{ marginBottom: "5px" }}>
|
||||
{step.headline}
|
||||
</Typography>
|
||||
<Typography style={isHardware ? {} : { marginBottom: "5px" }}>
|
||||
<ReactMarkdown
|
||||
className={"tutorial"}
|
||||
linkTarget={"_blank"}
|
||||
skipHtml={false}
|
||||
>
|
||||
{step.text}
|
||||
</ReactMarkdown>
|
||||
</Typography>
|
||||
{isHardware ? <Hardware picture={step.hardware} /> : null}
|
||||
{areRequirements > 0 ? (
|
||||
<Requirement requirements={step.requirements} />
|
||||
) : null}
|
||||
{step.media ? (
|
||||
step.media.picture ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
marginBottom: "5px",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={`${process.env.REACT_APP_BLOCKLY_API}/media/${step.media.picture.path}`}
|
||||
alt=""
|
||||
style={{ maxHeight: "40vH", maxWidth: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
) : step.media.youtube ? (
|
||||
/*16:9; width: 800px; height: width/16*9=450px*/
|
||||
<div style={{ maxWidth: "800px", margin: "auto" }}>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
height: 0,
|
||||
paddingBottom: "calc(100% / 16 * 9)",
|
||||
}}
|
||||
>
|
||||
<iframe
|
||||
title={step.media.youtube}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "0",
|
||||
left: "0",
|
||||
width: "100%",
|
||||
maxWidth: "800px",
|
||||
height: "100%",
|
||||
maxHeight: "450px",
|
||||
}}
|
||||
src={`https://www.youtube.com/embed/${step.media.youtube}`}
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : null
|
||||
) : null}
|
||||
{step.xml ? (
|
||||
<Grid container spacing={2} style={{ marginBottom: "5px" }}>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
style={{ display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<BlocklyWindow svg blockDisabled initialXml={step.xml} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
: null}
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default Instruction;
|
||||
|
||||
Reference in New Issue
Block a user