Merge pull request code-dot-org#10302 from code-dot-org/viewSectionStep

[axof: 231] View section step

Author: Bjvanminnen

apps/i18n/common/en_us.json

@@ -1,6 +1,6 @@
 {
   "allowEditing": "Allow editing",
-  "allowEditingInstructions": "1. \"Allow editing\" while students should be taking the assessment.",
+  "allowEditingInstructions": "\"Allow editing\" while students should be taking the assessment.",
   "and": "and",
   "animationMode": "Animation",
   "answersVisible": "Answers visible (read-only)",
@@ -186,7 +186,7 @@
   "lockFollowing": "Lock the following stages that are currently unlocked:",
   "lockSettings": "Lock settings",
   "lockStage": "Lock stage",
-  "lockStageInstructions": "2. Once time is up, \"Lock stage\" to hide questions.",
+  "lockStageInstructions": "Once time is up, \"Lock stage\" to hide questions.",
   "lockWhenDone": "Lock as soon as students are done",
   "makeYourOwnFlappy": "Make Your Own Flappy Game",
   "missingRecommendedBlocksErrorMsg": "Not quite. Try using a block you aren’t using yet.",
@@ -232,11 +232,12 @@
   "readonlyWorkspaceHeader": "View only: ",
   "recommendedBlockContextualHintTitle": "Try using a block like this to solve the puzzle.",
   "relockStage": "Re-lock stage",
-  "relockStageInstructions": "4. \"Re-lock stage\" to prevent sharing of answers with other classes/schools.",
+  "relockStageInstructions": "\"Re-lock stage\" to prevent sharing of answers with other classes/schools.",
   "repeat": "repeat",
   "reportAbuse": "Report Abuse",
   "resetProgram": "Reset",
   "restoreThisVersion": "Restore this Version",
+  "reviewResponses": "Go to the assessment/survey tab for your section to review student responses.",
   "rotateText": "Rotate your device.",
   "runProgram": "Run",
   "runTooltip": "Run the program defined by the blocks in the workspace.",
@@ -274,7 +275,7 @@
   "unsubmitYourProject": "Unsubmit your project",
   "unsubmitYourProjectConfirm": "Unsubmitting your project will reset the submitted date, really unsubmit?",
   "showAnswers": "Show answers",
-  "showAnswersInstructions": "3. \"Show answers\" to put the assessment into a read-only mode.",
+  "showAnswersInstructions": "\"Show answers\" to put the assessment into a read-only mode.",
   "student": "Student",
   "studentControl": "Individual student control",
   "subtitle": "a visual programming environment",
@@ -294,6 +295,7 @@
   "unattachedBlockTipTitle": "Unattached blocks",
   "unattachedBlockTipBody": "Blocks that are not attached will not do anything. If you want these blocks in your program, try connecting them to other blocks.",
   "viewPageAs": "View page as:",
+  "viewSection": "View section",
   "wantToLearn": "Want to learn to code?",
   "watchVideo": "Watch the Video",
   "when": "when",

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

@@ -70,6 +70,7 @@ const StageLockDialog = React.createClass({
         lockStatus: React.PropTypes.oneOf(Object.values(LockStatus)).isRequired
       })
     ),
+    selectedSection: React.PropTypes.string.isRequired,
     saving: React.PropTypes.bool.isRequired,
     saveDialog: React.PropTypes.func.isRequired
   },
@@ -109,6 +110,10 @@ const StageLockDialog = React.createClass({
     this.setAllLockStatus(LockStatus.ReadonlyAnswers);
   },
 
+  viewSection() {
+    window.open(`${window.dashboard.CODE_ORG_URL}/teacher-dashboard#/sections/${this.props.selectedSection}/assessments`, '_blank');
+  },
+
   handleRadioChange(event) {
     const modifiedIndex = parseInt(event.target.name, 10);
     const value = event.target.value;
@@ -144,7 +149,7 @@ const StageLockDialog = React.createClass({
           <table>
             <tbody>
               <tr>
-                <td>{commonMsg.allowEditingInstructions()}</td>
+                <td>1. {commonMsg.allowEditingInstructions()}</td>
                 <td>
                   <button
                     style={progressStyles.orangeButton}
@@ -155,7 +160,7 @@ const StageLockDialog = React.createClass({
                 </td>
               </tr>
               <tr>
-                <td>{commonMsg.lockStageInstructions()}</td>
+                <td>2. {commonMsg.lockStageInstructions()}</td>
                 <td>
                   <button
                     style={progressStyles.orangeButton}
@@ -166,7 +171,7 @@ const StageLockDialog = React.createClass({
                 </td>
               </tr>
               <tr>
-                <td>{commonMsg.showAnswersInstructions()}</td>
+                <td>3. {commonMsg.showAnswersInstructions()}</td>
                 <td>
                   <button
                     style={progressStyles.orangeButton}
@@ -177,7 +182,7 @@ const StageLockDialog = React.createClass({
                 </td>
               </tr>
               <tr>
-                <td>{commonMsg.relockStageInstructions()}</td>
+                <td>4. {commonMsg.relockStageInstructions()}</td>
                 <td>
                   <button
                     style={progressStyles.orangeButton}
@@ -187,6 +192,17 @@ const StageLockDialog = React.createClass({
                   </button>
                 </td>
               </tr>
+              <tr>
+                <td>5. {commonMsg.reviewResponses()}</td>
+                <td>
+                  <button
+                    style={progressStyles.whiteButton}
+                    onClick={this.viewSection}
+                  >
+                    {commonMsg.viewSection()}
+                  </button>
+                </td>
+              </tr>
             </tbody>
           </table>
           <div style={styles.descriptionText}>{commonMsg.autolock()}</div>
@@ -280,7 +296,8 @@ const StageLockDialog = React.createClass({
 export default connect(state => ({
   initialLockStatus: state.stageLock.lockStatus,
   isOpen: !!state.stageLock.lockDialogStageId,
-  saving: state.stageLock.saving
+  saving: state.stageLock.saving,
+  selectedSection: state.stageLock.selectedSection
 }), dispatch => ({
   saveDialog(lockStatus) {
     dispatch(saveLockDialog(lockStatus));

apps/src/code-studio/components/progress/progressStyles.js

@@ -41,6 +41,11 @@ const progressStyles = {
   orangeButton: Object.assign({}, baseButtonStyle, {
     backgroundColor: color.orange,
     color: color.white,
-  })
+  }),
+  whiteButton: Object.assign({}, baseButtonStyle, {
+    backgroundColor: color.white,
+    color: color.dark_charcoal,
+    borderColor: color.lighter_gray
+  }),
 };
 export default progressStyles;

apps/src/code-studio/pd/workshop_dashboard/workshop.jsx

@@ -1,5 +1,3 @@
-/* global TEACHER_DASHBOARD_URL */
-
 /**
  * Workshop view / edit. Displays and optionally edits details for a workshop.
  * Routes:
@@ -228,7 +226,7 @@ const Workshop = React.createClass({
   },
 
   getSectionUrl() {
-    return `${window.dashboard.workshop.TEACHER_DASHBOARD_URL}#/sections/${this.state.workshop.section_id}/manage`;
+    return `${window.dashboard.CODE_ORG_URL}/teacher-dashboard#/sections/${this.state.workshop.section_id}/manage`;
   },
 
   renderSignupPanel() {

dashboard/app/assets/javascripts/application.js.erb

@@ -30,4 +30,10 @@
 //= require details-polyfill/jquery.details
 //= require details-polyfill/details-polyfill
 
-//= require selectize
+//= require selectize
+
+// window.dashboard is used to communicate between dashboard/apps in a variety
+// of places. In this case we want to make availale to our JS the url of the
+// pegasus portion of our site (i.e. http://code.org vs. http://studio.code.org)
+window.dashboard = window.dashboard || {};
+window.dashboard.CODE_ORG_URL = "<%= CDO.code_org_url %>";

dashboard/app/views/pd/workshop_dashboard/index.html.haml

@@ -6,7 +6,6 @@
 
 :javascript
   window.dashboard.workshop = {
-    TEACHER_DASHBOARD_URL: "#{CDO.code_org_url '/teacher-dashboard'}",
     TYPES: #{Pd::Workshop::TYPES},
     COURSES: #{Pd::Workshop::COURSES},
     SUBJECTS: #{Pd::Workshop::SUBJECTS.to_json},