@doenet/doenetml 0.6.0-alpha1

package/src/Viewer/renderers/alert.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import useDoenetRender from "../useDoenetRenderer";
+
+export default React.memo(function Alert(props) {
+  let { name, id, SVs, children } = useDoenetRender(props);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  return (
+    <strong id={id}>
+      <a name={id} />
+      {children}
+    </strong>
+  );
+});

package/src/Viewer/renderers/angle.jsx

@@ -0,0 +1,209 @@
+import React, { useEffect, useContext, useRef } from "react";
+import useDoenetRender from "../useDoenetRenderer";
+import { BoardContext, LINE_LAYER_OFFSET } from "./graph";
+import me from "math-expressions";
+import { MathJax } from "better-react-mathjax";
+
+export default React.memo(function Angle(props) {
+  let { name, id, SVs } = useDoenetRender(props);
+
+  const board = useContext(BoardContext);
+
+  let point1JXG = useRef(null);
+  let point2JXG = useRef(null);
+  let point3JXG = useRef(null);
+  let angleJXG = useRef(null);
+  let previousWithLabel = useRef(null);
+
+  useEffect(() => {
+    //On unmount
+    return () => {
+      deleteGraphicalObject();
+    };
+  }, []);
+
+  function deleteGraphicalObject() {
+    // if angle is defined
+    if (point1JXG.current !== null) {
+      board.removeObject(angleJXG.current);
+      angleJXG.current = null;
+      board.removeObject(point1JXG.current);
+      point1JXG.current = null;
+      board.removeObject(point2JXG.current);
+      point2JXG.current = null;
+      board.removeObject(point3JXG.current);
+      point3JXG.current = null;
+    }
+  }
+
+  function createAngleJXG() {
+    if (
+      SVs.numericalPoints.length !== 3 ||
+      SVs.numericalPoints.some((x) => x.length !== 2) ||
+      !(Number.isFinite(SVs.numericalRadius) && SVs.numericalRadius > 0)
+    ) {
+      return null;
+    }
+
+    var jsxAngleAttributes = {
+      name: SVs.labelForGraph,
+      visible: !SVs.hidden,
+      withLabel: SVs.labelForGraph !== "",
+      fixed: true, //SVs.draggable !== true,
+      layer: 10 * SVs.layer + LINE_LAYER_OFFSET,
+      radius: SVs.numericalRadius,
+      fillColor: SVs.selectedStyle.fillColor,
+      strokeColor: SVs.selectedStyle.lineColor,
+      highlight: false,
+      orthoType: SVs.emphasizeRightAngle ? "square" : "sector",
+    };
+
+    jsxAngleAttributes.label = {
+      highlight: false,
+    };
+    if (SVs.labelHasLatex) {
+      jsxAngleAttributes.label.useMathJax = true;
+    }
+
+    previousWithLabel.current = SVs.labelForGraph !== "";
+
+    let through;
+
+    if (SVs.swapPointOrder) {
+      through = [
+        [...SVs.numericalPoints[2]],
+        [...SVs.numericalPoints[1]],
+        [...SVs.numericalPoints[0]],
+      ];
+    } else {
+      through = [
+        [...SVs.numericalPoints[0]],
+        [...SVs.numericalPoints[1]],
+        [...SVs.numericalPoints[2]],
+      ];
+    }
+
+    let jsxPointAttributes = {
+      visible: false,
+    };
+
+    // create invisible points at through
+    point1JXG.current = board.create("point", through[0], jsxPointAttributes);
+    point2JXG.current = board.create("point", through[1], jsxPointAttributes);
+    point3JXG.current = board.create("point", through[2], jsxPointAttributes);
+
+    return board.create(
+      "angle",
+      [point1JXG.current, point2JXG.current, point3JXG.current],
+      jsxAngleAttributes,
+    );
+  }
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  if (board) {
+    if (angleJXG.current === null) {
+      angleJXG.current = createAngleJXG();
+    } else if (
+      SVs.numericalPoints.length !== 3 ||
+      SVs.numericalPoints.some((x) => x.length !== 2) ||
+      !(Number.isFinite(SVs.numericalRadius) && SVs.numericalRadius > 0)
+    ) {
+      deleteGraphicalObject();
+    } else {
+      //update
+
+      let through;
+      if (SVs.swapPointOrder) {
+        through = [
+          [...SVs.numericalPoints[2]],
+          [...SVs.numericalPoints[1]],
+          [...SVs.numericalPoints[0]],
+        ];
+      } else {
+        through = [
+          [...SVs.numericalPoints[0]],
+          [...SVs.numericalPoints[1]],
+          [...SVs.numericalPoints[2]],
+        ];
+      }
+
+      // in JSXgraph, point 1 and point 2 are switched
+      angleJXG.current.point2.coords.setCoordinates(
+        JXG.COORDS_BY_USER,
+        through[0],
+      );
+      angleJXG.current.point1.coords.setCoordinates(
+        JXG.COORDS_BY_USER,
+        through[1],
+      );
+      angleJXG.current.point3.coords.setCoordinates(
+        JXG.COORDS_BY_USER,
+        through[2],
+      );
+
+      angleJXG.current.setAttribute({
+        radius: SVs.numericalRadius,
+        visible: !SVs.hidden,
+      });
+
+      let layer = 10 * SVs.layer + LINE_LAYER_OFFSET;
+      let layerChanged = angleJXG.current.visProp.layer !== layer;
+
+      if (layerChanged) {
+        angleJXG.current.setAttribute({ layer });
+      }
+
+      if (angleJXG.current.visProp.fillcolor !== SVs.selectedStyle.fillColor) {
+        angleJXG.current.visProp.fillcolor = SVs.selectedStyle.fillColor;
+      }
+      if (
+        angleJXG.current.visProp.strokecolor !== SVs.selectedStyle.lineColor
+      ) {
+        angleJXG.current.visProp.strokecolor = SVs.selectedStyle.lineColor;
+      }
+
+      angleJXG.current.name = SVs.labelForGraph;
+
+      let withlabel = SVs.labelForGraph !== "";
+      if (withlabel != previousWithLabel.current) {
+        angleJXG.current.setAttribute({ withlabel: withlabel });
+        previousWithLabel.current = withlabel;
+      }
+
+      angleJXG.current.visProp.orthotype = SVs.emphasizeRightAngle
+        ? "square"
+        : "sector";
+
+      angleJXG.current.needsUpdate = true;
+      angleJXG.current.update();
+
+      if (angleJXG.current.hasLabel) {
+        angleJXG.current.label.needsUpdate = true;
+        angleJXG.current.label.update();
+      }
+      board.updateRenderer();
+    }
+
+    return (
+      <>
+        <a name={id} />
+      </>
+    );
+  }
+
+  let mathJaxify = "\\(" + SVs.latexForRenderer + "\\)";
+
+  return (
+    <>
+      <a name={id} />
+      <span id={id}>
+        <MathJax hideUntilTypeset={"first"} inline dynamic>
+          {mathJaxify}
+        </MathJax>
+      </span>
+    </>
+  );
+});

package/src/Viewer/renderers/answer.jsx

@@ -0,0 +1,206 @@
+import React from "react";
+import useDoenetRender from "../useDoenetRenderer";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faCheck,
+  faLevelDownAlt,
+  faTimes,
+  faCloud,
+} from "@fortawesome/free-solid-svg-icons";
+import styled from "styled-components";
+
+// Moved most of checkWorkStyle styling into Button
+const Button = styled.button`
+  position: relative;
+  height: 24px;
+  display: inline-block;
+  color: white;
+  background-color: var(--mainBlue);
+  padding: 2px;
+  /* border: var(--mainBorder); */
+  border: none;
+  border-radius: var(--mainBorderRadius);
+  margin: 0px 4px 4px 0px;
+
+  &:hover {
+    background-color: var(--lightBlue);
+    color: black;
+  }
+`;
+
+export default React.memo(function Answer(props) {
+  let { name, id, SVs, actions, children, callAction } = useDoenetRender(props);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  let disabled = SVs.disabled;
+
+  let submitAnswer = () =>
+    callAction({
+      action: actions.submitAnswer,
+    });
+  if (SVs.submitAllAnswersAtAncestor) {
+    submitAnswer = () =>
+      callAction({
+        action: actions.submitAllAnswers,
+      });
+  }
+
+  // BADBADBAD: need to redo how getting the input child
+  // without using the internal guts of componentInstructions
+  // is just asking for trouble
+
+  let inputChildrenToRender = null;
+  if (SVs.inputChildren.length > 0) {
+    let inputChildNames = SVs.inputChildren.map((x) => x.componentName);
+    inputChildrenToRender = children.filter(
+      //child might be null or a string
+      (child) =>
+        child &&
+        typeof child !== "string" &&
+        inputChildNames.includes(
+          child.props.componentInstructions.componentName,
+        ),
+    );
+  }
+
+  if (!SVs.delegateCheckWork && !SVs.suppressCheckwork) {
+    let validationState = "unvalidated";
+    if (SVs.justSubmitted || SVs.numAttemptsLeft < 1) {
+      if (SVs.creditAchieved === 1) {
+        validationState = "correct";
+      } else if (SVs.creditAchieved === 0) {
+        validationState = "incorrect";
+      } else {
+        validationState = "partialcorrect";
+      }
+    }
+
+    let checkWorkStyle = {
+      cursor: "pointer",
+      padding: "1px 6px 1px 6px",
+    };
+
+    if (disabled) {
+      checkWorkStyle.backgroundColor = getComputedStyle(
+        document.documentElement,
+      ).getPropertyValue("--mainGray");
+    }
+
+    let checkWorkText = SVs.submitLabel;
+    if (!SVs.showCorrectness) {
+      checkWorkText = SVs.submitLabelNoCorrectness;
+    }
+    let checkworkComponent = (
+      <Button
+        id={id + "_submit"}
+        tabIndex="0"
+        disabled={disabled}
+        style={checkWorkStyle}
+        onClick={submitAnswer}
+        onKeyPress={(e) => {
+          if (e.key === "Enter") {
+            submitAnswer();
+          }
+        }}
+      >
+        <FontAwesomeIcon
+          style={
+            {
+              /*marginRight: "4px", paddingLeft: "2px"*/
+            }
+          }
+          icon={faLevelDownAlt}
+          transform={{ rotate: 90 }}
+        />
+        &nbsp;
+        {checkWorkText}
+      </Button>
+    );
+
+    if (SVs.showCorrectness) {
+      if (validationState === "correct") {
+        checkWorkStyle.backgroundColor = getComputedStyle(
+          document.documentElement,
+        ).getPropertyValue("--mainGreen");
+        checkworkComponent = (
+          <Button id={id + "_correct"} style={checkWorkStyle}>
+            <FontAwesomeIcon icon={faCheck} />
+            &nbsp; Correct
+          </Button>
+        );
+      } else if (validationState === "incorrect") {
+        checkWorkStyle.backgroundColor = getComputedStyle(
+          document.documentElement,
+        ).getPropertyValue("--mainRed");
+        checkworkComponent = (
+          <Button id={id + "_incorrect"} style={checkWorkStyle}>
+            <FontAwesomeIcon icon={faTimes} />
+            &nbsp; Incorrect
+          </Button>
+        );
+      } else if (validationState === "partialcorrect") {
+        checkWorkStyle.backgroundColor = "#efab34";
+        let percent = Math.round(SVs.creditAchieved * 100);
+        let partialCreditContents = `${percent}% Correct`;
+
+        checkworkComponent = (
+          <Button id={id + "_partial"} style={checkWorkStyle}>
+            {partialCreditContents}
+          </Button>
+        );
+      }
+    } else {
+      // showCorrectness is false
+      if (validationState !== "unvalidated") {
+        checkWorkStyle.backgroundColor = "rgb(74, 3, 217)";
+        checkworkComponent = (
+          <Button id={id + "_saved"} style={checkWorkStyle}>
+            <FontAwesomeIcon icon={faCloud} />
+            &nbsp; Response Saved
+          </Button>
+        );
+      }
+    }
+
+    if (SVs.numAttemptsLeft < 0) {
+      checkworkComponent = (
+        <>
+          {checkworkComponent}
+          <span>(no attempts remaining)</span>
+        </>
+      );
+    } else if (SVs.numAttemptsLeft == 1) {
+      checkworkComponent = (
+        <>
+          {checkworkComponent}
+          <span>(1 attempt remaining)</span>
+        </>
+      );
+    } else if (Number.isFinite(SVs.numAttemptsLeft)) {
+      checkworkComponent = (
+        <>
+          {checkworkComponent}
+          <span>({SVs.numAttemptsLeft} attempts remaining)</span>
+        </>
+      );
+    }
+
+    return (
+      <span id={id} style={{ marginBottom: "4px" }}>
+        <a name={id} />
+        {inputChildrenToRender}
+        {checkworkComponent}
+      </span>
+    );
+  } else {
+    return (
+      <span id={id} style={{ marginBottom: "4px" }}>
+        <a name={id} />
+        {inputChildrenToRender}
+      </span>
+    );
+  }
+});

package/src/Viewer/renderers/asList.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import useDoenetRender from "../useDoenetRenderer";
+
+export default React.memo(function AsList(props) {
+  let { name, id, SVs, children } = useDoenetRender(props);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  if (children.length === 0) {
+    return <React.Fragment key={id} />;
+  }
+
+  let withCommas = children
+    .slice(1)
+    .reduce((a, b) => [...a, ", ", b], [children[0]]);
+
+  return (
+    <React.Fragment key={id}>
+      <a name={id} />
+      {withCommas}
+    </React.Fragment>
+  );
+});

package/src/Viewer/renderers/blockQuote.jsx

@@ -0,0 +1,41 @@
+import React, { useEffect } from "react";
+import useDoenetRenderer from "../useDoenetRenderer";
+import VisibilitySensor from "react-visibility-sensor-v2";
+
+export default React.memo(function Container(props) {
+  let { name, id, SVs, children, actions, callAction } =
+    useDoenetRenderer(props);
+
+  let onChangeVisibility = (isVisible) => {
+    if (actions.recordVisibilityChange) {
+      callAction({
+        action: actions.recordVisibilityChange,
+        args: { isVisible },
+      });
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (actions.recordVisibilityChange) {
+        callAction({
+          action: actions.recordVisibilityChange,
+          args: { isVisible: false },
+        });
+      }
+    };
+  }, []);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  return (
+    <VisibilitySensor partialVisibility={true} onChange={onChangeVisibility}>
+      <blockquote id={id}>
+        <a name={id} />
+        {children}
+      </blockquote>
+    </VisibilitySensor>
+  );
+});

package/src/Viewer/renderers/boolean.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import useDoenetRender from "../useDoenetRenderer";
+
+export default React.memo(function Boolean(props) {
+  let { name, id, SVs } = useDoenetRender(props, false);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  return (
+    <>
+      <a name={id} />
+      <span id={id}>{SVs.text}</span>
+    </>
+  );
+});

package/src/Viewer/renderers/booleanInput.css

@@ -0,0 +1,105 @@
+/* Customize the label (the container) */
+.container {
+  /* display: inline-block; */
+  position: relative;
+  padding-left: 24px;
+  margin-bottom: 4px;
+  margin-right: 2px; /* 2px less than other components (6px marginRight) due to the 2px marginLeft on label */
+  margin-left: 4px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.container-disabled {
+  cursor: not-allowed;
+}
+
+/* .button-container {
+    display: inline-block;
+    position: relative;
+    margin-bottom: 12px;
+    margin-right: 2px;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+} */
+
+/* Hide the browser's default checkbox */
+.container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+/* Create a custom checkbox */
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 18px;
+  width: 18px;
+  background-color: var(--mainGray);
+  border-style: solid;
+  border-color: var(--canvastext);
+  border-radius: var(--mainBorderRadius);
+  border-width: 2px;
+  box-sizing: content-box;
+}
+
+.checkmark-disabled {
+  background-color: var(--mainGray);
+  border-color: var(--mainGray);
+}
+
+/* On mouse-over, add a light blue background color */
+.container:hover input ~ .checkmark {
+  background-color: var(--lightBlue);
+}
+
+/* On mouse-over of disabled, keep the grey background color */
+.container:hover input ~ .checkmark-disabled {
+  background-color: var(--mainGray);
+}
+
+/* When the checkbox is checked, add a dark blue background */
+.container input:checked ~ .checkmark {
+  background-color: var(--mainBlue);
+}
+
+/* When a checkbox has focus, add a dark blue outline */
+.container:focus-within input ~ .checkmark {
+  outline: 2px solid var(--canvastext);
+  outline-offset: 2px;
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+/* Show the checkmark when checked */
+.container input:checked ~ .checkmark:after {
+  display: block;
+}
+
+/* Style the checkmark/indicator */
+.container .checkmark:after {
+  left: 5px;
+  top: 1px;
+  width: 5px;
+  height: 10px;
+  border: solid var(--canvas);
+  border-width: 0 3px 3px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}