diff --git a/client/public/images/codeReplayRecord.png b/client/public/images/codeReplayRecord.png new file mode 100644 index 000000000..ba49fbc31 Binary files /dev/null and b/client/public/images/codeReplayRecord.png differ diff --git a/client/src/Utils/requests.js b/client/src/Utils/requests.js index 79fa17f63..a548d953d 100644 --- a/client/src/Utils/requests.js +++ b/client/src/Utils/requests.js @@ -474,6 +474,7 @@ export const updateActivityDetails = async ( StandardS, images, link, + lessonView, scienceComponents, makingComponents, computationComponents @@ -488,6 +489,7 @@ export const updateActivityDetails = async ( StandardS, images, link, + lessonView, scienceComponents, makingComponents, computationComponents, diff --git a/client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/ContentCreatorCanvas.jsx b/client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/ContentCreatorCanvas.jsx index 760b7b5d9..a2750dec6 100644 --- a/client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/ContentCreatorCanvas.jsx +++ b/client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/ContentCreatorCanvas.jsx @@ -300,6 +300,9 @@ export default function ContentCreatorCanvas({ + +

Code Replay Editor

+ ); diff --git a/client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/MentorCanvas.jsx b/client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/MentorCanvas.jsx index 7d99ef2be..eada97d4f 100644 --- a/client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/MentorCanvas.jsx +++ b/client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/MentorCanvas.jsx @@ -271,6 +271,12 @@ export default function MentorCanvas({ activity, isSandbox, setActivity, isMent + +
+ +

Code Replay Editor

+
+ ); diff --git a/client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/StudentCanvas.css b/client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/StudentCanvas.css new file mode 100644 index 000000000..018858fa4 --- /dev/null +++ b/client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/StudentCanvas.css @@ -0,0 +1,79 @@ +.app-container { + min-height: 100vh; + padding: 1em 1em; + display: flex; + flex-direction: row; + height: 100vh; + } + + .app-sidebar { + flex-grow: 0; + flex-shrink: 0; + min-width: 150px; + max-width: 300px; + display: flex; + border-right: #e9e9e9 1px solid; + flex-direction: row; + background: #ffffff; + box-shadow: -8px 2px 22px -7px rgba(0, 0, 0, 0.25); + border-radius: 10px 0px 0px 10px; + z-index: 2; + } + + .app-frame { + flex: 1; + display: flex; + flex-direction: column; + background: white; + height: 100vh; + max-height: 100%; + background: #ffffff; + box-shadow: 8px 2px 32px -2px rgba(0, 0, 0, 0.25); + border-radius: 0px 10px 10px 0px; + z-index: 1; + } + + .app-sidebar .app-sidebar-content { + flex: 1; + } + + .app-sidebar .app-sidebar-resizer { + flex-grow: 0; + flex-shrink: 0; + flex-basis: 6px; + justify-self: flex-end; + cursor: col-resize; + resize: horizontal; + } + + .app-sidebar .app-sidebar-resizer:hover { + width: 3px; + background: #c1c3c5b4; + } + + #horizontal-container { + display: flex; + } + + #bottom-container { + flex-grow: 1; + overflow: hidden; + } + + #lesson-container { + flex-basis: 30%; + overflow: hidden; + border-left: 1px solid #ddd; + padding-left: 20px; + height: 79%; + border-radius: 15px; + } + + #blockly-canvas { + height: 100vh; + } + + #icon-control-panel { + margin-bottom: 10px; + } + \ No newline at end of file diff --git a/client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/StudentCanvas.jsx b/client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/StudentCanvas.jsx index e3f6a914b..140db1b34 100644 --- a/client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/StudentCanvas.jsx +++ b/client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/StudentCanvas.jsx @@ -1,5 +1,7 @@ import React, { useEffect, useRef, useState, useReducer } from 'react'; import '../../ActivityLevels.less'; +import './StudentCanvas.css'; +import SplitPane from 'react-split-pane'; import { compileArduinoCode, handleSave } from '../../Utils/helpers'; import { message, Spin, Row, Col, Alert, Dropdown, Menu } from 'antd'; import { getSaves } from '../../../../Utils/requests'; @@ -16,6 +18,7 @@ import { import ArduinoLogo from '../Icons/ArduinoLogo'; import PlotterLogo from '../Icons/PlotterLogo'; import { useNavigate } from 'react-router-dom'; +import Replay from '../../../../views/Replay/Replay'; let plotId = 1; @@ -43,6 +46,17 @@ export default function StudentCanvas({ activity }) { const replayRef = useRef([]); const clicks = useRef(0); + const [lessonVisible, setLessonVisible] = useState(false); + + const lessonViewOnOff = () => { + console.log("Current state before toggle:", lessonVisible); + setLessonVisible(!lessonVisible); + console.log("State after toggle:", !lessonVisible); + }; + + const handleResize = (e, { size }) => { + setLeftPanelWidth(size.width); + }; const setWorkspace = () => { workspaceRef.current = window.Blockly.inject('blockly-canvas', { @@ -352,6 +366,15 @@ export default function StudentCanvas({ activity }) { return (
+ + +
{activity.lesson_module_name} + @@ -499,6 +525,18 @@ export default function StudentCanvas({ activity }) {
+ {/* THE RIGHT HAND SIDE OF THE WEBPAGE (WHERE LESSON SUPPOSE TO BE) */} + + {lessonVisible && ( +
+ <> +

Test Lesson

+

This is a sample lesson content.

+ +
+)} + + + /> + +
{/* This xml is for the blocks' menu we will provide. Here are examples on how to include categories and subcategories */} @@ -550,4 +590,4 @@ export default function StudentCanvas({ activity }) { )}
); -} +} \ No newline at end of file diff --git a/client/src/components/ActivityPanels/BlocklyCanvasPanel/modals/LessonModal.jsx b/client/src/components/ActivityPanels/BlocklyCanvasPanel/modals/LessonModal.jsx new file mode 100644 index 000000000..b5a193950 --- /dev/null +++ b/client/src/components/ActivityPanels/BlocklyCanvasPanel/modals/LessonModal.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { Modal, Button } from 'antd'; + + +const LessonModal = ({ isVisible, closeModal, lessonContent }) => { + return ( + + // Functional components to display a lesson + + Close + + ]} + > + {lessonContent} + + ); + }; + + export default LessonModal; \ No newline at end of file diff --git a/client/src/views/BlocklyPage/BlocklyPage.jsx b/client/src/views/BlocklyPage/BlocklyPage.jsx index 584766bd6..1b47e0234 100644 --- a/client/src/views/BlocklyPage/BlocklyPage.jsx +++ b/client/src/views/BlocklyPage/BlocklyPage.jsx @@ -74,10 +74,10 @@ export default function BlocklyPage({ isSandbox }) { return (
- -
- -
+ +
+
+
) } diff --git a/client/src/views/ContentCreator/ActivityEditor/components/ActivityDetailModal.jsx b/client/src/views/ContentCreator/ActivityEditor/components/ActivityDetailModal.jsx index ac4203595..9856dc3fe 100644 --- a/client/src/views/ContentCreator/ActivityEditor/components/ActivityDetailModal.jsx +++ b/client/src/views/ContentCreator/ActivityEditor/components/ActivityDetailModal.jsx @@ -27,6 +27,7 @@ const ActivityDetailModal = ({ const [StandardS, setStandardS] = useState("") const [images, setImages] = useState("") const [link, setLink] = useState("") + const [sideBySide, setSideBySide] = useState(false) const [scienceComponents, setScienceComponents] = useState([]) const [makingComponents, setMakingComponents] = useState([]) diff --git a/client/src/views/Mentor/Classroom/Home/MentorActivityDetailModal.jsx b/client/src/views/Mentor/Classroom/Home/MentorActivityDetailModal.jsx index c2d7a159b..dedb484da 100644 --- a/client/src/views/Mentor/Classroom/Home/MentorActivityDetailModal.jsx +++ b/client/src/views/Mentor/Classroom/Home/MentorActivityDetailModal.jsx @@ -1,4 +1,4 @@ -import { Button, Form, Input, message, Modal } from "antd" +import { Button, Form, Input, message, Modal, Switch } from "antd" import React, { useEffect, useState } from "react" import { useNavigate } from "react-router-dom" import { @@ -32,6 +32,7 @@ const MentorActivityDetailModal = ({ const [makingComponents, setMakingComponents] = useState([]) const [computationComponents, setComputationComponents] = useState([]) const [activityDetailsVisible, setActivityDetailsVisible] = useState(false) + const [lessonView, setLessonView] = useState(false) const [linkError, setLinkError] = useState(false) const [submitButton, setSubmitButton] = useState(0) const navigate = useNavigate() @@ -48,6 +49,7 @@ const MentorActivityDetailModal = ({ setActivityTemplate(response.data.activity_template) setStandardS(response.data.StandardS) setImages(response.data.images) + setLessonView(response.data.lessonView) setLink(response.data.link) setLinkError(false) const science = response.data.learning_components @@ -113,6 +115,8 @@ const MentorActivityDetailModal = ({ } } setLinkError(false) + console.log("Lesson View before update:", lessonView); // Add this line + const res = await updateActivityDetails( selectActivity.id, description, @@ -120,10 +124,13 @@ const MentorActivityDetailModal = ({ StandardS, images, link, + lessonView, scienceComponents, makingComponents, computationComponents ) + console.log("Lesson View after update:", lessonView); // Add this line + if (res.err) { message.error(res.err) } else { @@ -148,6 +155,7 @@ const MentorActivityDetailModal = ({ setVisible(true) //setOpen(true) }; + return (