{
return null;
};
-const RenderContent = ({ data, exercise, pathwayData }) => {
+const RenderContent = ({ data, exercise, pathwayData, pythonRunner }) => {
const classes = useStyles();
- const isActive = useMediaQuery("(max-width:" + breakpoints.values.sm + "px)");
+ // const isActive = useMediaQuery("(max-width:" + breakpoints.values.sm + "px)");
const playerRef = useRef(null);
const videoId = data.value.includes("=")
@@ -303,8 +287,9 @@ const RenderContent = ({ data, exercise, pathwayData }) => {
);
}
- if (data.component === "code") {
+ if (data.component === "code" && data.type !== "python") {
const codeContent = DOMPurify.sanitize(get(data, "value"));
+
return (
@@ -318,26 +303,31 @@ const RenderContent = ({ data, exercise, pathwayData }) => {
Code Example
{/* */}
+
-
-
-
);
}
+
+ if (data.component === "code" && data.type === "python") {
+ const pythonCode = data.value
+ .replace(/
/g, "\n")
+ .replace(/ /g, " ".repeat(INDENT));
+ return (
+
+ );
+ }
// if (data.type === "solution") {
// return (
//
@@ -360,7 +350,7 @@ function ExerciseContent({
courseTitle,
progressTrackId,
}) {
- const isActive = useMediaQuery("(max-width:" + breakpoints.values.sm + "px)");
+ // const isActive = useMediaQuery("(max-width:" + breakpoints.values.sm + "px)");
const user = useSelector(({ User }) => User);
const [content, setContent] = useState([]);
const [course, setCourse] = useState();
@@ -499,7 +489,18 @@ function ExerciseContent({
function ExerciseContentMain() {
const [selected, setSelected] = useState(params.exerciseId);
const desktop = useMediaQuery("(min-width: 900px)");
-
+ const pythonRunner = usePython();
+ // const [pythonRunner, setPythonRunner] = useState(null);
+
+ /*
+ useEffect(() => {
+ if (!pythonRunner && content?.find(contentItem => contentItem.component === "code" && contentItem.type === "python")) {
+ // only load Pyodide when there's a Python code component
+ setPythonRunner(usePython());
+ }
+ }, [content, pythonRunner]);
+ */
+
return (
{!desktop && }
@@ -580,6 +581,7 @@ function ExerciseContent({
{content &&
content.map((contentItem, index) => (
);
}
-
- const isActive = useMediaQuery("(max-width:" + breakpoints.values.sm + "px)");
- const isActiveIpad = useMediaQuery("(max-width:1300px)");
+
+ // const isActive = useMediaQuery("(max-width:" + breakpoints.values.sm + "px)");
+ // const isActiveIpad = useMediaQuery("(max-width:1300px)");
+ // const theme = useTheme();
return (
<>
@@ -588,10 +591,12 @@ function PathwayExercise() {
@@ -633,22 +638,22 @@ function PathwayExercise() {
) : (
//
+ {/* */}
+ {/* */}
)}
-
+