DTL (Test > Levelbuilder): db3169d3

apps/i18n/common/en_us.json

@@ -137,6 +137,7 @@
   "applabTutorialTitle": "App Lab Hour of Code",
   "archiveSection": "Archive Section",
   "archivedSections": "Archived Sections",
+  "assessment": "Assessment",
   "assessmentAndSurvey": "Assessments / Surveys",
   "assessmentOpportunity": "Assessment Opportunity",
   "assessmentOpportunities": "Assessment Opportunities",
@@ -928,6 +929,7 @@
   "infinity": "Infinity",
   "inProgress": "In progress",
   "inspireStudents": "Inspire students",
+  "instructionalLesson": "Instructional Lesson",
   "instructions": "Instructions",
   "instructionsWithColon": "Instructions:",
   "intlAnnouncementSpecial2020Body": "Take a Code Break with us, or see resources for students, parents, and teachers - including videos, fun tutorials, and projects! Most options only available in English.",
@@ -990,6 +992,7 @@
   "level": "Level,",
   "levels": "Levels",
   "levelDetails": "Level Details",
+  "levelGroupDetailsDialogText": "This level is an assessment or survey with multiple questions. To view this level click \"{buttonText}\".",
   "levelHeader": "Level",
   "levelIncompleteError": "Keep coding! Something's not quite right yet.",
   "levelN": "LEVEL {levelNumber}",
@@ -1022,6 +1025,7 @@
   "libraryPublishInvalid": "Your library must include a description and at least one function.",
   "libraryPublishFail": "There was an error publishing your library. Please check your internet connection and try again.",
   "libraryPublishTitle": "Successfully published your library: ",
+  "libraryTooLongFail": "Your library is too long. Please make it shorter and try again.",
   "librarySharedSections": "This library is assigned to the following sections:",
   "libraryUnPublishExplanation": "No one will be able to import or update your library. However, people who have already imported your library will be able to keep using it. You can re-publish your library at any time.",
   "libraryUnPublishFail": "There was an error unpublishing your library. Please check your internet connection and try again.",
@@ -1538,8 +1542,9 @@
   "searchForCountry": "Search for your country.",
   "searchForSchool": "Enter your school name, city, or zip code to search",
   "searchForSchoolPrompt": "e.g. \"Lincoln Elementary\" or \"Lincoln Elementary Lynwood\" or \"Lynwood\"",
-  "seeFullResponse": " ...see full response",
+  "seeFullLevel": "See Full Level",
   "seeFullQuestion": " ...see full question",
+  "seeFullResponse": " ...see full response",
   "school": "School",
   "schoolCity": "School City",
   "schoolCityTown": "City / Town",
@@ -1879,6 +1884,7 @@
   "unnamedFunction": "You have a variable or function that does not have a name. Don't forget to give everything a descriptive name.",
   "unplugged": "Unplugged",
   "unpluggedActivity": "Unplugged Activity",
+  "unpluggedLesson": "Unplugged Lesson",
   "unpublish": "Unpublish",
   "unpublishPending": "Unpublishing...",
   "unpublishFailureTitle": "Unpublish Failed",
@@ -1933,6 +1939,7 @@
   "viewAllSections": "View all sections",
   "viewArchivedSections": "View archived sections",
   "viewBy": "View By",
+  "viewCalendarButton": "View calendar",
   "viewCode": "View code",
   "viewCourse": "View course",
   "viewCourses": "View courses",
@@ -1960,6 +1967,9 @@
   "wantToLearn": "Want to learn to code?",
   "warning": "Warning",
   "watchVideo": "Watch the Video",
+  "weekLabel": "Week {number}",
+  "weeklyLessonLayout": "Weekly Lesson Layout",
+  "weeklyLessonLayoutDescription": "A weekly chart of a suggested schedule based on {minutes} instructional minutes per week.",
   "welcomeToDanceParty": "Welcome to Dance Party!",
   "when": "when",
   "whenRun": "when run",

apps/src/MLTrainers.js

@@ -1,4 +1,5 @@
 import KNN from 'ml-knn';
+import {stripSpaceAndSpecial} from '@cdo/apps/aiUtils';
 
 const KNNTrainers = ['knnClassify', 'knnRegress'];
 
@@ -48,7 +49,7 @@ export function predict(modelData) {
       convertTestValue(
         modelData.featureNumberKey,
         feature,
-        modelData.testData[feature]
+        modelData.testData[stripSpaceAndSpecial(feature)]
       )
     );
     // Make a prediction.

apps/src/aiUtils.js

@@ -0,0 +1,5 @@
+// Strip whitespace and special characters. We need this to use feature name
+// strings as design element ids and object {} keys.
+export function stripSpaceAndSpecial(string) {
+  return string.replace(/\W/g, '');
+}

apps/src/applab/ai.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import designMode from './designMode';
+import {stripSpaceAndSpecial} from '@cdo/apps/aiUtils';
 
 function generateCodeDesignElements(modelId, modelData) {
   var x = 20;
@@ -10,8 +11,7 @@ function generateCodeDesignElements(modelId, modelData) {
   modelData.selectedFeatures.forEach(feature => {
     y = y + SPACER_PIXELS;
     var label = designMode.createElement('LABEL', x, y);
-    // Strip whitespace and special characters.
-    var alphaNumFeature = feature.replace(/\W/g, '');
+    var alphaNumFeature = stripSpaceAndSpecial(feature);
     label.textContent = feature + ':';
     label.id = 'design_' + alphaNumFeature + '_label';
     label.style.width = '300px';
@@ -40,7 +40,7 @@ function generateCodeDesignElements(modelId, modelData) {
   y = y + 2 * SPACER_PIXELS;
   var label = designMode.createElement('LABEL', x, y);
   label.textContent = modelData.labelColumn;
-  var alphaNumModelName = modelData.name.replace(/\W/g, '');
+  var alphaNumModelName = stripSpaceAndSpecial(modelData.name);
   label.id = 'design_' + alphaNumModelName + '_label';
   label.style.width = '300px';
   y = y + SPACER_PIXELS;

apps/src/code-studio/components/libraries/LibraryPublisher.jsx

@@ -64,6 +64,7 @@ export const PublishState = {
   ERROR_PUBLISH: 'error_publish',
   INVALID_INPUT: 'invalid_input',
   PROFANE_INPUT: 'profane_input',
+  TOO_LONG: 'too_long',
   ERROR_UNPUBLISH: 'error_unpublish'
 };
 
@@ -165,7 +166,14 @@ export default class LibraryPublisher extends React.Component {
       libraryJson,
       error => {
         console.warn(`Error publishing library: ${error}`);
-        this.setState({publishState: PublishState.ERROR_PUBLISH});
+        if (
+          error.message ===
+          'httpStatusCode: 413; status: error; error: Request Entity Too Large'
+        ) {
+          this.setState({publishState: PublishState.TOO_LONG});
+        } else {
+          this.setState({publishState: PublishState.ERROR_PUBLISH});
+        }
       },
       data => {
         // Write to projects database
@@ -318,6 +326,9 @@ export default class LibraryPublisher extends React.Component {
       case PublishState.ERROR_PUBLISH:
         errorMessage = i18n.libraryPublishFail();
         break;
+      case PublishState.TOO_LONG:
+        errorMessage = i18n.libraryTooLongFail();
+        break;
       case PublishState.ERROR_UNPUBLISH:
         errorMessage = i18n.libraryUnPublishFail();
         break;

apps/src/code-studio/components/progress/UnitCalendar.jsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import i18n from '@cdo/locale';
+import _ from 'lodash';
+import UnitCalendarLessonChunk from './UnitCalendarLessonChunk';
+import {unitCalendarLesson} from '@cdo/apps/templates/progress/unitCalendarLessonShapes';
+import FontAwesome from '@cdo/apps/templates/FontAwesome';
+import color from '@cdo/apps/util/color';
+
+const WEEK_WIDTH = 592;
+const styles = {
+  weekColumn: {
+    minWidth: 100,
+    backgroundColor: color.purple,
+    color: 'white',
+    textAlign: 'center',
+    border: '1px solid ' + color.purple,
+    borderCollapse: 'collapse',
+    fontWeight: 'bold',
+    minHeight: 50
+  },
+  scheduleColumn: {
+    border: '1px solid ' + color.purple,
+    borderCollapse: 'collapse',
+    width: WEEK_WIDTH,
+    display: 'flex',
+    minHeight: 50
+  },
+  table: {
+    border: '1px solid ' + color.purple,
+    borderCollapse: 'collapse',
+    width: '100%'
+  },
+  key: {
+    border: '1px solid ' + color.purple,
+    borderCollapse: 'collapse',
+    width: '100%',
+    marginTop: 20
+  },
+  keyIcon: {
+    marginRight: 5
+  },
+  keySection: {
+    display: 'flex',
+    justifyContent: 'space-around',
+    width: '90%',
+    alignItems: 'center',
+    fontSize: 15
+  }
+};
+
+export default class UnitCalendar extends React.Component {
+  static propTypes = {
+    weeklyInstructionalMinutes: PropTypes.number.isRequired,
+    lessons: PropTypes.arrayOf(unitCalendarLesson).isRequired
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      hovering: ''
+    };
+  }
+
+  generateSchedule = () => {
+    const {lessons, weeklyInstructionalMinutes} = this.props;
+    const lessonsCopy = _.cloneDeep(lessons);
+    let allWeeks = [];
+    let currWeek = [];
+    let currMinutes = 0;
+    // splitting lessons across weeks
+    lessonsCopy.forEach(lesson => {
+      lesson.isStart = false;
+      lesson.isEnd = false;
+      lesson.isMajority = false;
+      const originalLessonDuration = lesson.duration;
+      while (lesson.duration > 0) {
+        let lessonClone = _.cloneDeep(lesson);
+        if (currMinutes + lesson.duration <= weeklyInstructionalMinutes) {
+          // If the rest of the current lesson fits into this week, put it in the schedule.
+          if (originalLessonDuration === lesson.duration) {
+            lessonClone.isStart = true;
+          }
+          if (originalLessonDuration - lesson.duration <= lesson.duration) {
+            lessonClone.isMajority = true;
+          }
+          lessonClone.isEnd = true;
+          currWeek.push(lessonClone);
+          currMinutes = currMinutes + lesson.duration;
+          lesson.duration = 0;
+        } else if (currMinutes < weeklyInstructionalMinutes - 15) {
+          // If there's more than 15 minutes left in the week,
+          // add as much of the lesson as you can to this week.
+          if (originalLessonDuration === lesson.duration) {
+            lessonClone.isStart = true;
+          }
+          lessonClone.duration = weeklyInstructionalMinutes - currMinutes;
+          if (lesson.duration - lessonClone.duration < lessonClone.duration) {
+            lessonClone.isMajority = true;
+          }
+          currWeek.push(lessonClone);
+          lesson.duration = lesson.duration - lessonClone.duration;
+          currMinutes = weeklyInstructionalMinutes;
+        } else {
+          // If there isn't enough time in this week to add this lesson, start a new week.
+          allWeeks.push(currWeek);
+          currWeek = [];
+          currMinutes = 0;
+        }
+      }
+    });
+    allWeeks.push(currWeek);
+    return allWeeks;
+  };
+
+  handleHover = id => {
+    this.setState({hovering: id});
+  };
+
+  renderWeek = (week, weekNumber) => {
+    const minuteWidth = WEEK_WIDTH / this.props.weeklyInstructionalMinutes;
+    return week.map((lessonChunk, index) => (
+      <UnitCalendarLessonChunk
+        key={`week-${weekNumber}-lesson-chunk-${index}`}
+        minuteWidth={minuteWidth}
+        lessonChunk={lessonChunk}
+        isHover={lessonChunk.id === this.state.hovering}
+        handleHover={this.handleHover}
+      />
+    ));
+  };
+
+  render() {
+    const schedule = this.generateSchedule();
+    return (
+      <div>
+        <table style={styles.table}>
+          <tbody>
+            {schedule.map((week, index) => (
+              <tr key={`week-${index}`}>
+                <td style={styles.weekColumn}>
+                  {i18n.weekLabel({number: index + 1})}
+                </td>
+                <td style={styles.scheduleColumn}>
+                  {this.renderWeek(week, index + 1)}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <table style={styles.key}>
+          <tbody>
+            <tr>
+              <td style={styles.weekColumn}>Key</td>
+              <td style={styles.scheduleColumn}>
+                <div style={styles.keySection}>
+                  <div>
+                    <FontAwesome
+                      icon="square-o"
+                      style={{
+                        color: color.teal,
+                        ...styles.keyIcon
+                      }}
+                    />
+                    {i18n.instructionalLesson()}
+                  </div>
+                  <div>
+                    <FontAwesome
+                      icon="check-circle"
+                      style={{
+                        color: color.purple,
+                        ...styles.keyIcon
+                      }}
+                    />
+                    {i18n.assessment()}
+                  </div>
+                  <div>
+                    <FontAwesome icon="scissors" style={styles.keyIcon} />
+                    {i18n.unpluggedLesson()}
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}