@khanacademy/perseus 6.4.4 → 6.5.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "6.4.4",
+    "version": "6.5.0",
     "publishConfig": {
         "access": "public"
     },
@@ -23,7 +23,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.1",
-        "@khanacademy/math-input": "^6.0.2",
+        "@khanacademy/math-input": "^6.0.3",
         "@khanacademy/perseus-core": "0.0.2",
         "@khanacademy/perseus-linter": "^0.3.1",
         "@khanacademy/pure-markdown": "^0.2.3",

package/src/__stories__/item-renderer.stories.tsx

@@ -4,6 +4,7 @@ import {ItemRendererWithDebugUI} from "../../../../testing/item-renderer-with-de
 import {
     itemWithInput,
     labelImageItem,
+    codeblockItem,
 } from "../__testdata__/item-renderer.testdata";
 
 type StoryArgs = Record<any, any>;
@@ -23,3 +24,7 @@ export const InputNumberItem = (args: StoryArgs): React.ReactElement => {
 export const LabelImageItem = (args: StoryArgs): React.ReactElement => {
     return <ItemRendererWithDebugUI item={labelImageItem} />;
 };
+
+export const CodeblockItem = (args: StoryArgs): React.ReactElement => {
+    return <ItemRendererWithDebugUI item={codeblockItem} />;
+};

package/src/__testdata__/item-renderer.testdata.ts

@@ -5,6 +5,145 @@ import type {
     PerseusRenderer,
 } from "../perseus-types";
 
+export const codeblockItem: PerseusItem = {
+    question: {
+        content:
+            'Charlotte is writing code to turn sentences into Pig Latin.\n\nThis is what she has so far:\n\n```\nsentence ← ""\nword1 ←  "Hello"\nfirstLetter1 ← SUBSTRING(word1, 1, 1)\notherLetters1 ← SUBSTRING(word1, 2, LENGTH(word1) - 1)\npigLatin1 ← CONCAT(otherLetters1, firstLetter1, "ay")\nsentence ← CONCAT(sentence, pigLatin1, " ")\nword2 ←  "Mister"\nfirstLetter2 ← SUBSTRING(word2, 1, 1)\notherLetters2 ← SUBSTRING(word2, 2, LENGTH(word2) - 1)\npigLatin2 ← CONCAT(otherLetters2, firstLetter2, "ay")\nsentence ← CONCAT(sentence, pigLatin2, " ")\nword3 ←  "Rogers"\nfirstLetter3 ← SUBSTRING(word3, 1, 1)\notherLetters3 ← SUBSTRING(word3, 2, LENGTH(word3) - 1)\npigLatin3 ← CONCAT(otherLetters3, firstLetter3, "ay")\nsentence ← CONCAT(sentence, pigLatin3, " ")\nDISPLAY(sentence)\n```\n\nThe code relies on two string procedures:\n\nName | Description\n- | - | -\n`CONCATENATE (string1, string2, ...)` | Returns a single string that combines the provided strings together in order.\n`SUBSTRING (string, startPos, numChars)` | Returns a substring of `string` starting at `startPos` of length `numChars`. The first character in the string is at position 1.\n\nA friend points out that she can reduce the complexity of her code by using the abstractions of lists and loops. \n\nCharlotte decides to "refactor" the code, to rewrite it so that it produces the same output but is structured better.\n\n**Which of these is the best refactor of the code?**\n\n[[☃ radio 1]]\n\n🤔[[☃ explanation 1]]',
+        images: {},
+        widgets: {
+            "radio 1": {
+                type: "radio",
+                alignment: "default",
+                static: false,
+                graded: true,
+                options: {
+                    choices: [
+                        {
+                            content:
+                                '```\nwords ← ["Hello", "Mister", "Rogers"]\nsentence ← ""\nFOR EACH word IN words\n{\n    firstLetter ← SUBSTRING(word, 1, 1)\n    otherLetters ← SUBSTRING(word, 2, LENGTH(word) - 1)\n    pigLatin ← CONCAT(otherLetters, firstLetter, "ay")\n    sentence ← CONCAT(sentence, pigLatin, " ")\n}\nDISPLAY(sentence)\n```',
+                            correct: true,
+                        },
+                        {
+                            content:
+                                '```\nwords ← ["Hello", "Mister", "Rogers"]\nsentence ← ""\nFOR EACH word IN words\n{\n    firstLetter ← SUBSTRING(words[1], 1, 1)\n    otherLetters ← SUBSTRING(words[1], 2, LENGTH(words[1]) - 1)\n    pigLatin ← CONCAT(otherLetters, firstLetter, "ay")\n    sentence ← CONCAT(sentence, pigLatin, " ")\n}\nDISPLAY(sentence)\n```',
+                            correct: false,
+                        },
+                        {
+                            isNoneOfTheAbove: false,
+                            content:
+                                '```\nwords ← ["Hello", "Mister", "Rogers"]\nFOR EACH word IN words\n{\n    sentence ← ""\n    firstLetter ← SUBSTRING(word, 1, 1)\n    otherLetters ← SUBSTRING(word, 2, LENGTH(word) - 1)\n    pigLatin ← CONCAT(otherLetters, firstLetter, "ay")\n    sentence ← CONCAT(sentence, pigLatin, " ")\n}\nDISPLAY(sentence)\n```',
+                            correct: false,
+                        },
+                        {
+                            isNoneOfTheAbove: false,
+                            content:
+                                '```\nwords ← ["Hello", "Mister", "Rogers"]\nsentence ← ""\nFOR EACH word IN words\n{\n    firstLetter ← SUBSTRING(word, 1, 1)\n    otherLetters ← SUBSTRING(word, 2, LENGTH(word) - 1)\n    pigLatin ← CONCAT(otherLetters, firstLetter, "ay")\n    sentence ← CONCAT(sentence, pigLatin, " ")\n    DISPLAY(sentence)\n}\n```',
+                            correct: false,
+                        },
+                        {
+                            isNoneOfTheAbove: false,
+                            content:
+                                '```\nwords ← ["Hello", "Mister", "Rogers"]\nFOR EACH word IN words\n{\n    sentence ← ""\n    firstLetter ← SUBSTRING(word, 1, 1)\n    otherLetters ← SUBSTRING(word, 2, LENGTH(word) - 1)\n    pigLatin ← CONCAT(otherLetters, firstLetter, "ay")\n    sentence ← CONCAT(sentence, pigLatin, " ")\n    DISPLAY(sentence)\n}\n```',
+                        },
+                    ],
+                    randomize: true,
+                    multipleSelect: false,
+                    countChoices: false,
+                    displayCount: null,
+                    hasNoneOfTheAbove: false,
+                    deselectEnabled: false,
+                },
+                version: {
+                    major: 1,
+                    minor: 0,
+                },
+            },
+            "explanation 1": {
+                type: "explanation",
+                alignment: "default",
+                static: false,
+                graded: true,
+                options: {
+                    static: false,
+                    showPrompt: "What language is the code in?",
+                    hidePrompt: "Hide explanation",
+                    explanation:
+                        "This code is written in **pseudocode**. You can't actually run pseudocode, but we use it for planning programs and for thinking about code independently of specific programming language. \n\nAP CSP exam questions use pseudocode, so it's helpful to become familiar with it.\n\nHere is a reference for the pseudocode used here:\n\n****\n\n`a ← expression`\n\nEvaluates `expression` and assigns the result to the variable `a`.\n\n****\n\n`list ← [value1, value2, value3]`\n\nCreates a list with 3 values. The first value is located at index 1, the second at index 2, the third at index 3.\n\n****\n\n```\nFOR EACH value IN list\n{\n   <instructions>\n}\n```\n\nAssigns `value` to the value of each element in `list` sequentially, starting from the first element and ending with the last element. Executes the code in `instructions` once for each `value`.\n",
+                    widgets: {},
+                },
+                version: {
+                    major: 0,
+                    minor: 0,
+                },
+            },
+        },
+    },
+    answerArea: {
+        calculator: false,
+        chi2Table: false,
+        periodicTable: false,
+        tTable: false,
+        zTable: false,
+    },
+    itemDataVersion: {
+        major: 0,
+        minor: 1,
+    },
+    hints: [
+        {
+            replace: false,
+            content:
+                'The first step in refactoring this code is to recognize the related variables that can be combined into a list.\n\nIn this case, that\'s `word1`, `word2`, and `word3` from the original code. We can tell they\'re related from the naming, but more importantly, from the way the same code is repeated for each of them.\n\nWe\'ll store the values of those 3 variables in a single list:\n\n```words ← ["Hello", "Mister", "Rogers"]```',
+            images: {},
+            widgets: {},
+        },
+        {
+            replace: false,
+            content:
+                "The next step in refactoring this code is to identify the code that is only executed once versus the code that is executed for each element in that list.",
+            images: {},
+            widgets: {},
+        },
+        {
+            replace: false,
+            content:
+                'We can see that there are 3 blocks of code that deal with each of the original variables.\n\nCode for `word1`:\n\n```\nword1 ←  "Hello"\nfirstLetter1 ← SUBSTRING(word1, 1, 1)\notherLetters1 ← SUBSTRING(word1, 2, LENGTH(word1) - 1)\npigLatin1 ← CONCAT(otherLetters1, firstLetter1, "ay")\nsentence ← CONCAT(sentence, pigLatin1, " ")\n```\n\n\nCode for `word2`:\n\n```\nword2 ←  "Mister"\nfirstLetter2 ← SUBSTRING(word2, 1, 1)\notherLetters2 ← SUBSTRING(word2, 2, LENGTH(word2) - 1)\npigLatin2 ← CONCAT(otherLetters2, firstLetter2, "ay")\nsentence ← CONCAT(sentence, pigLatin2, " ")\n```\n\nCode for `word3`:\n\n```\nword3 ←  "Rogers"\nfirstLetter3 ← SUBSTRING(word3, 1, 1)\notherLetters3 ← SUBSTRING(word3, 2, LENGTH(word3) - 1)\npigLatin3 ← CONCAT(otherLetters3, firstLetter3, "ay")\nsentence ← CONCAT(sentence, pigLatin3, " ")\n```\n\nEach of these blocks of code do the same operations:\n\n1. store the word in a variable\n2. store a substring of the word, the first letter in it\n3. store another substring of the word, the rest of the letters\n4. store a new string that concatenates the two substrings and "ay"\n5. concatenate that string with the existing `sentence`',
+            images: {},
+            widgets: {},
+        },
+        {
+            replace: false,
+            content:
+                'Now that we\'ve put the variables into a list, we can use a loop to execute those same operations on each element:\n\n```\nFOR EACH word in words\n{\n    firstLetter ← SUBSTRING(word, 1, 1)\n    otherLetters ← SUBSTRING(word, 2, LENGTH(word) - 1)\n    pigLatin ← CONCAT(otherLetters, firstLetter, "ay")\n    sentence ← CONCAT(sentence, pigLatin, " ")\n}\n```\n\nYou\'ll notice there are only four lines of code inside the loop, versus the five lines in the grouped blocks from before. That\'s because the `FOR EACH` header takes care of storing the current list element in `word`. The value of `word` will first be "Hello", then "Mister", then "Rogers", according to the order of the values in the list.\n',
+            images: {},
+            widgets: {},
+        },
+        {
+            replace: false,
+            content:
+                'There are two lines of code that we haven\'t refactored yet.\n\nOne is the very first line of the original code:\n\n`sentence ← ""`\n\nIn the new code, this needs to happen _before_ the `FOR EACH` loop, since the value of `sentence` is manipulated inside the loop.',
+            images: {},
+            widgets: {},
+        },
+        {
+            replace: false,
+            content:
+                "The remaining line is the very last line of the original code:\n\n```DISPLAY(sentence)```\n\nIn the new code, this needs to happen _after_ the `FOR EACH` loop, since it should display the value after all the concatenations happen.",
+            images: {},
+            widgets: {},
+        },
+        {
+            replace: false,
+            content:
+                'Thus, this is the best refactor of the original code to use lists and loops:\n\n```\nwords ← ["Hello", "Mister", "Rogers"]\nsentence ← ""\nFOR EACH word IN words\n{\n    firstLetter ← SUBSTRING(word, 1, 1)\n    otherLetters ← SUBSTRING(word, 2, LENGTH(word) - 1)\n    pigLatin ← CONCAT(otherLetters, firstLetter, "ay")\n    sentence ← CONCAT(sentence, pigLatin, " ")\n}\nDISPLAY(sentence)\n```',
+            images: {},
+            widgets: {},
+        },
+    ],
+    _multi: null,
+    answer: null,
+};
+
 export const itemWithInput: PerseusItem = {
     question: {
         content:

package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap

@@ -105,10 +105,10 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
               class="perseus-widget-container widget-nohighlight widget-block"
             >
               <div
-                class="responsiveContainer_vq37gq"
+                class="responsiveContainer_12z1v8o"
               >
                 <fieldset
-                  class="perseus-widget-radio-fieldset responsiveFieldset_c0l5kf"
+                  class="perseus-widget-radio-fieldset responsiveFieldset_le06t6"
                 >
                   <legend
                     class="perseus-sr-only"
@@ -117,7 +117,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                   </legend>
                   <div
                     aria-hidden="true"
-                    class="instructions instructions_125m8j1"
+                    class="instructions instructions_f9jkqj"
                   >
                     Choose 1 answer:
                   </div>
@@ -133,7 +133,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                         style="flex-direction: column; color: rgb(33, 36, 44);"
                       >
                         <div
-                          style="display: flex; flex-direction: row; opacity: 1;"
+                          style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
                         >
                           <div
                             class="perseus-sr-only"
@@ -300,7 +300,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                         style="flex-direction: column; color: rgb(33, 36, 44);"
                       >
                         <div
-                          style="display: flex; flex-direction: row; opacity: 1;"
+                          style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
                         >
                           <div
                             class="perseus-sr-only"
@@ -467,7 +467,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                         style="flex-direction: column; color: rgb(33, 36, 44);"
                       >
                         <div
-                          style="display: flex; flex-direction: row; opacity: 1;"
+                          style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
                         >
                           <div
                             class="perseus-sr-only"
@@ -634,7 +634,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                         style="flex-direction: column; color: rgb(33, 36, 44);"
                       >
                         <div
-                          style="display: flex; flex-direction: row; opacity: 1;"
+                          style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
                         >
                           <div
                             class="perseus-sr-only"
@@ -801,7 +801,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                         style="flex-direction: column; color: rgb(33, 36, 44);"
                       >
                         <div
-                          style="display: flex; flex-direction: row; opacity: 1;"
+                          style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
                         >
                           <div
                             class="perseus-sr-only"

package/src/styles/articles.less

@@ -129,7 +129,9 @@
         margin-top: 32px;
     }
 
-    h4, h5, h6 {
+    h4,
+    h5,
+    h6 {
         font-family: inherit;
         font-size: 22px;
         font-weight: 700;
@@ -175,7 +177,8 @@
 
     // Some images use an image widget, but some are just inlined in the
     // paragraph. Inlined images need legacy typography, too.
-    .unresponsive-svg-image, .svg-image {
+    .unresponsive-svg-image,
+    .svg-image {
         .legacy-typography;
     }
     .perseus-block-math {
@@ -201,7 +204,12 @@
     // If the article starts with a heading, remove its unnecessary top margin.
     > .clearfix:first-child {
         > .perseus-renderer:first-child > .paragraph:first-child {
-            h1, h2, h3, h4, h5, h6 {
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6 {
                 &:first-child {
                     margin-top: 0;
                 }
@@ -235,10 +243,10 @@
         color: @gray17;
         font-size: 18px;
         padding: 16px;
-        white-space: pre-wrap;
+        white-space: pre;
+        overflow: auto;
         margin: 0 -16px 32px -16px;
     }
-
 }
 
 // HACK(emily): This is a copy of a bunch of the mixins from the block of
@@ -343,7 +351,8 @@
         // 06/08/2016, there are 188 articles and exercises that use H4 (and
         // just 8 that use H5 or H6). As such, we provide style support for H4,
         // since it's still quite common--but we just replicate the H3 style.
-        h3, h4 {
+        h3,
+        h4 {
             .header(@fontSize, @lineHeight, @gray41, @paddingTopMultiplier);
         }
     }
@@ -421,7 +430,6 @@
 
     .math(@blockMathTextSize; @blockMathLineHeight;
           @inlineMathTextSize; @inlineMathLineHeight) {
-
         .katex {
             font-size: @inlineMathTextSize;
             line-height: @inlineMathLineHeight;
@@ -446,7 +454,6 @@
 
     .code(@codeTextSize; @codeTextLineHeight;
           @codeBlockHorizontalMarginMultiplier) {
-
         code {
             font-family: Courier, monospace;
         }
@@ -458,9 +465,8 @@
             font-size: @codeTextSize;
             line-height: @codeTextLineHeight;
             padding: @baseUnit;
-            white-space: pre-wrap;
-            // NOTE(pamela): This rule previously included negative margins.
-            // However, negative margins overlap with question answers (A/B/C)
+            white-space: pre;
+            overflow: auto;
         }
     }
 
@@ -529,7 +535,8 @@
     // Support for nested lists
     .perseus-renderer > .paragraph ol,
     .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) {
-        ol, ul:not(.perseus-widget-radio) {
+        ol,
+        ul:not(.perseus-widget-radio) {
             padding-top: 1.5 * @baseUnit;
         }
     }
@@ -537,7 +544,7 @@
     // Disable the Safari tap highlight for block math, which is now tappable
     // via the tap-to-zoom functionality.
     .perseus-block-math {
-        -webkit-tap-highlight-color: rgba(0,0,0,0);
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
         -webkit-touch-callout: none;
     }
 
@@ -652,7 +659,8 @@
 
     // Some images use an image widget, but some are just inlined in the
     // paragraph. Inlined images need legacy typography, too.
-    .unresponsive-svg-image, .svg-image {
+    .unresponsive-svg-image,
+    .svg-image {
         .legacy-typography;
     }
 
@@ -673,8 +681,6 @@
     }
 }
 
-
-
 /* Derived from the MIT-licensed zoom.js:
    https://github.com/fat/zoom.js/blob/fd4f3e43153da7596da0bade198e99f98b47791e/
 */
@@ -704,7 +710,7 @@ img.zoom-img {
 }
 
 .zoom-transition {
-    transition:         transform @zoomAnimationDurationMs ease;
+    transition: transform @zoomAnimationDurationMs ease;
 }
 
 .zoom-overlay {
@@ -739,7 +745,7 @@ img.zoom-img {
     bottom: 0;
     background: white;
     opacity: 0;
-    transition:         opacity @zoomAnimationDurationMs;
+    transition: opacity @zoomAnimationDurationMs;
 }
 
 .zoom-overlay-open > .zoom-backdrop {