Commit 41d3cedc by Mark Hoeber

Merge pull request #2185 from edx/markhoeber/documentation/stud-1041

Documentation accessibility
parents ca180834 d4228163
......@@ -39,6 +39,7 @@ then click the name of the problem that you want to create.
.. _Circuit Schematic Builder:
Circuit Schematic Builder
-------------------------
......@@ -48,6 +49,7 @@ an interactive grid. They then submit a DC, AC, or transient analysis of
their circuit to the system for grading.
.. image:: /Images/CircuitSchematicExample.gif
:alt: Image of a circuit schematic builder
Create a Circuit Schematic Builder Problem
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
......@@ -76,6 +78,7 @@ The JS Input problem that you create must use HTML, JavaScript, and cascading st
create your JS Input problem.
.. image:: /Images/JavaScriptInputExample.gif
:alt: Image of a JavaScript Input problem
Create a Custom JavaScript Display and Grading Problem
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
......@@ -220,6 +223,7 @@ can be any type. Numerical input and text input problems are the most
popular write-your-own-grader.
.. image:: Images/WriteYourOwnGraderExample.gif
:alt: Image of a write your own grader problem
Create a Write-Your-Own-Grader Problem
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
......@@ -245,6 +249,7 @@ In drag and drop problems, students respond to a question by dragging
text or objects to a specific location on an image.
.. image:: Images/DragAndDropExample.gif
:alt: Image of a drag and drop problem
Create a Drag and Drop Problem
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
......@@ -272,6 +277,7 @@ in an image. You define this area by including coordinates in the body
of the problem.
.. image:: Images/ImageMappedInputExample.gif
:alt: Image of an image mapped input problem
Create an Image Mapped Input Problem
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
......@@ -305,6 +311,7 @@ plain text into "beautiful math." For more information about how to use
MathJax in Studio, see :ref:`MathJax in Studio`.
.. image:: Images/MathExpressionInputExample.gif
:alt: Image of math expression input problem
Create a Math Expression Input Problem
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
......@@ -339,6 +346,7 @@ not be supported in the future**, so you should use it with caution.
MathJax, see *A Brief Introduction to MathJax in Studio*.
.. image:: Images/ProblemWrittenInLaTeX.gif
:alt: Image of a problem written in LaTeX
Create a Problem Written in LaTeX
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
......@@ -366,6 +374,7 @@ student is more likely to answer correctly on the next attempt. These
problems can be text input or multiple choice problems.
.. image:: Images/ProblemWithAdaptiveHintExample.gif
:alt: Image of a problem with an adaptive hint
Create a Problem with an Adaptive Hint
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
......
......@@ -35,6 +35,7 @@ The above URL should bring you to the course registration page: [REPLACE WITH SC
.. image:: ../Images/image302.png
:width: 600
:alt: Image of a course registration page
......@@ -44,11 +45,13 @@ Click on the blue Register for [NUMBER OF YOUR CLASS] button:
.. image:: ../Images/image303.png
:width: 600
:alt: Image of the registration button
A pop-up user authentication window will appear. It will ask you to log in or sign up for edX. (If you already have an account with edX, use it to log in. You should now be registered for the course. Skip to Step 5. Otherwise, go on with Step 3.)
.. image:: ../Images/image305.png
:width: 600
:alt: Image of the registration page
**Step 3: Create your account with edX**
......
......@@ -26,6 +26,7 @@ Sample Problem:
.. image:: ../Images/image287.png
:width: 600
:alt: Image of an option response problem
**Problem Code:**
......@@ -115,7 +116,8 @@ differences between the two include the following.
Sample Problem:
.. image:: ../Images/image289.png
:width: 600
:width: 600:
:alt: Image of a multiple choice problem
**Problem Code:**
......@@ -207,6 +209,7 @@ Sample Problem:
.. image:: ../Images/image290.png
:width: 600
:alt: Image of a checkbox problem
**Problem Code:**
......@@ -267,6 +270,7 @@ Sample Problem:
.. image:: ../Images/image291.png
:width: 600
:alt: Image of a string response problem
**Problem Code:**
......@@ -425,6 +429,7 @@ Sample Problem:
.. image:: ../Images/image292.png
:width: 600
:alt: Image of a numerical response problem
**Problem Code**:
......@@ -737,6 +742,7 @@ Sample Problem:
.. image:: ../Images/image293.png
:width: 600
:alt: Image of a formula response problem
**Problem Code**:
......@@ -885,6 +891,7 @@ Sample Problem:
.. image:: ../Images/image295.png
:width: 600
:alt: Image of a custom response problem
**Problem Code**:
......@@ -1015,6 +1022,7 @@ Sample Problem:
.. image:: ../Images/image296.png
:width: 600
:alt: Image of a chemical equation response problem
**Problem Code**:
......@@ -1056,12 +1064,15 @@ Sample Problem:
.. image:: ../Images/image297.png
:width: 600
:alt: Image of a schematic response problem
.. image:: ../Images/image298.png
:width: 600
:alt: Image of a schematic response problem
.. image:: ../Images/image299.png
:width: 600
:alt: Image of a schematic response explanation
**Problem Code**:
......
......@@ -43,6 +43,7 @@ HTML (Text) Components
In the HTML component editor, you can use MathJax both in Visual view and in HTML view.
.. image:: ../Images/MathJax_HTML.gif
:alt: Image of an HTML component with MathJax in both the Visual and HTML views
Problem Components
------------------
......@@ -55,4 +56,5 @@ explanation is enclosed in backslashes and parentheses, so it appears inline wit
Navier-Stokes equation is enclosed in backslashes and brackets, so it appears on its
own line.
.. image:: ../Images/MathJax_Problem.gif
\ No newline at end of file
.. image:: ../Images/MathJax_Problem.gif
:alt: Image of a problem component with MathJax in both the Visual and HTML views
\ No newline at end of file
......@@ -28,6 +28,7 @@ progress through edX101.
.. image:: Images/image245.png
:width: 800
:alt: Image of a student's Course Progress page with the grade cutoffs legend highlighted
The student can see from this page that edX101 was graded as a Pass/Fail course with a cutoff
......@@ -46,6 +47,7 @@ down view of the example Progress page for the student in the example above:
.. image:: Images/image247.png
:width: 800
:alt: Image of a student's Course Progress page with problems highlighted
Again, note that point scores from graded sections are called "Problem
Scores", while point scores from ungraded sections are called "Practice
......@@ -66,6 +68,7 @@ the Grades page of the Instructor dashboard for edX101:
.. image:: Images/image249.png
:width: 800
:alt: Image of the Grades tab of the Instructor Dashboard
Here you see several options for viewing or downloading student grades,
viewing individual progress through a course or resetting problem attempts.
......
......@@ -42,6 +42,7 @@ apply to answer the problem correctly. Each checkbox problem must have
at least one correct answer.
.. image:: Images/CheckboxExample.gif
:alt: Image of a checkbox problem
==========================
Create a Checkbox Problem
......@@ -55,6 +56,7 @@ Create a Checkbox Problem
#. Select all the answer options, and then click the checkbox button.
.. image:: Images/ProbComponent_CheckboxIcon.gif
:alt: Image of the checkbox button
When you do this, brackets appear next to each answer choice.
......@@ -63,6 +65,7 @@ Create a Checkbox Problem
explanation button to add explanation tags around the text.
.. image:: Images/ProbCompButton_Explanation.gif
:alt: Image of the explanation button
#. On the **Settings** tab, specify the settings that you want.
#. Click **Save**.
......@@ -105,6 +108,7 @@ dropdown problems don't show answer choices until the student clicks
the dropdown arrow.
.. image:: Images/DropdownExample.gif
:alt: Image of a dropdown problem
==========================
Create a Dropdown Problem
......@@ -121,6 +125,7 @@ To create a dropdown problem, follow these steps.
#. Select all the answer options, and then click the dropdown button.
.. image:: Images/ProbCompButton_Dropdown.gif
:alt: Image of the dropdown button
When you do this, a double set of brackets ([[ ]]) appears and surrounds the
answer options.
......@@ -130,6 +135,7 @@ To create a dropdown problem, follow these steps.
explanation button to add explanation tags around the text.
.. image:: Images/ProbCompButton_Explanation.gif
:alt: Image of the explanation button
#. On the **Settings** tab, specify the settings that you want.
#. Click **Save**.
......@@ -162,6 +168,7 @@ choices for multiple choice problems are always visible directly below
the question.
.. image:: Images/MultipleChoiceExample.gif
:alt: Image of a multiple choice problem
==================================
Create a Multiple Choice Problem
......@@ -176,6 +183,7 @@ Create a Multiple Choice Problem
#. Select all the answer options, and then click the multiple choice button.
.. image:: Images/ProbCompButton_MultChoice.gif
:alt: Image of the multiple choice button
When you do this, the component editor adds a pair of parentheses next to each
possible answer.
......@@ -186,6 +194,7 @@ Create a Multiple Choice Problem
explanation button to add explanation tags around the text.
.. image:: Images/ProbCompButton_Explanation.gif
:alt: Image of the explanation button
#. On the **Settings** tab, specify the settings that you want.
#. Click **Save**.
......@@ -226,6 +235,7 @@ In numerical input problems, students enter numbers or specific and
relatively simple mathematical expressions to answer a question.
.. image:: Images/NumericalInputExample.gif
:alt: Image of a numerical input problem
Note that students' responses don't have to be exact for these problems. You can
specify a margin of error, or tolerance. For more information, see the instructions below.
......@@ -240,6 +250,7 @@ example shows the way Studio renders students' text responses in
numerical input problems. To see more examples, scroll down to **Examples**.
.. image:: Images/Math5.gif
:alt: Image of Studio's rendering of numerical input responses
==================================
Create a Numerical Input Problem
......@@ -254,6 +265,7 @@ Create a Numerical Input Problem
#. Select the text of the answer, and then click the numerical input button.
.. image:: Images/ProbCompButton_NumInput.gif
:alt: Image of the numerical input button
When you do this, an equal sign appears next to the answer.
......@@ -267,6 +279,7 @@ Create a Numerical Input Problem
explanation button to add explanation tags around the text.
.. image:: Images/ProbCompButton_Explanation.gif
:alt: Image of athe explanation button
#. On the **Settings** tab, specify the settings that you want.
#. Click **Save**.
......@@ -290,9 +303,13 @@ The following are a few more examples of the way that Studio renders numerical i
text that students enter.
.. image:: Images/Math1.gif
:alt: Image of a numerical input probem rendered by Studio
.. image:: Images/Math2.gif
:alt: Image of a numerical input probem rendered by Studio
.. image:: Images/Math3.gif
:alt: Image of a numerical input probem rendered by Studio
.. image:: Images/Math4.gif
:alt: Image of a numerical input probem rendered by Studio
For more information, see `Formula Equation Input
<https://edx.readthedocs.org/en/latest/course_data_formats/formula_equation_input.html>`_.
......@@ -311,6 +328,7 @@ punctuation, we recommend that you specify more than one attempt for
text input problems to allow for typographical errors.
.. image:: Images/TextInputExample.gif
:alt: Image of a text input probem
==================================
Create a Text Input Problem
......@@ -326,6 +344,7 @@ To create a text input problem, follow these steps.
#. Select the text of the answer, and then click the text input button.
.. image:: Images/ProbCompButton_TextInput.gif
:alt: Image of the text input button
When you do this, an equal sign appears next to the answer.
......@@ -334,6 +353,7 @@ To create a text input problem, follow these steps.
explanation button to add explanation tags around the text.
.. image:: Images/ProbCompButton_Explanation.gif
:alt: Image of the explanation button
#. On the **Settings** tab, specify the settings that you want.
#. Click **Save**.
......@@ -367,6 +387,7 @@ To do this, include "or=" (without the quotation marks) before each additional
correct response.
.. image:: Images/TextInput_MultipleAnswer.gif
:alt: Image of multiple responses in a text input problem
=========================================
Case Sensitivity and Text Input Problems
......
......@@ -35,10 +35,12 @@ For more information on Public and Private Units, see LINK.
#. Under **Add New Component**, click the **discussion** icon.
.. image:: Images/NewComponent_Discussion.png
:alt: Image of the adding a new discussion component
The Discussion component is added:
.. image:: Images/EditDiscussionComponent.png
:alt: Image of the discussion component with the Edit button circled
#. In the Discussion component, click **Edit**.
......@@ -46,6 +48,7 @@ For more information on Public and Private Units, see LINK.
The Discussion component editor opens.
.. image:: Images/DiscussionComponentEditor.png
:alt: Image of the discussion component editor
#. Follow the guidelines in the editor to fill in the **Discussion Category**, **Display Name**, and **Subcategory**.
......@@ -60,6 +63,7 @@ A Student's View of the Discussion
For students, Discussion component names appear in the course ribbon at the top of the page:
.. image:: Images/DiscussionComponent_LMS_Ribbon.png
:alt: Image of a unit from a student's point of view with the component list showing a discussion component
The Discussion space appears under other components in the unit.
It doesn't have a label in the body of the unit.
......@@ -69,11 +73,13 @@ and a blue **New Post** button on the right.
In the following example, the Discussion component follows Video and HTML components:
.. image:: Images/DiscussionComponent_LMS.png
:alt: Image of a video component followed by a discussion component
In the **Discussion** tab at the top of the page,
students can find the category and subcategory of the discussion in the left pane.
.. image:: Images/DiscussionComponent_Forum.png
:alt: Image of the discussion page from a student's point of view
.. _Seed a Discussion Space in Your Course:
......
......@@ -30,12 +30,14 @@ The HTML Component User Interface
When you create a new HTML component, you work with the HTML component editor. The editor has two views: **Visual view** and **HTML view.** To switch between Visual view and HTML view, click the tab in the upper-right corner of the component editor.
.. image:: Images/HTMLEditorTabs.gif
:alt: Image of the HTML component editor, with the Visual and HTML tabs circled
- **Visual view** provides a “what you see is what you get” (WYSIWYG) editor that allows you to format text by clicking the formatting buttons at the top of the editor. By default, every HTML component opens in Visual view.
Visual view includes the following formatting buttons.
.. image:: Images/HTML_VisualView_Toolbar.gif
:alt: Image of the HTML visual editor, with callouts for formatting buttons
#. Select a formatting style, such as heading 1, heading 2, or paragraph.
#. Format text in bold.
......@@ -53,10 +55,12 @@ When you create a new HTML component, you work with the HTML component editor. T
Visual view shows your content the way it will appear in the LMS. The following is the LMS rendition of the HTML component above.
.. image:: Images/HTMLComponent_VisualView_LMS.gif
:alt: Image of the visual view of the HTML component
- **HTML view** allows you to edit HTML code directly.
.. image:: Images/HTML_HTMLView.gif
:alt: Image of the HTML code view of the HTML component
.. note:: If you're in HTML view, you can always switch to Visual view to make sure your content looks the way you expect. For example, we recommend that you do this if you add an image or a link to an HTML component.
......@@ -71,18 +75,21 @@ To create an HTML component:
1. Under **Add New Component**, click **html**.
.. image:: Images/NewComponent_HTML.gif
:alt: Image of adding a new HTML component
2. In the list that appears, click **Text**.
An empty component appears at the bottom of the unit.
.. image:: Images/HTMLComponent_Edit.gif
:alt: Image of an empty HTML component
3. In the empty component, click **Edit**.
The HTML component editor opens in Visual view.
.. image:: Images/HTMLEditor.gif
:alt: Image of the HTML component Visual view
4. Enter the text and formatting that you want, either by using the formatting buttons in Visual view or by manually adding HTML tags in HTML view.
......@@ -107,6 +114,7 @@ Add a Link in an HTML Component
To add a link to a website, course unit, or file in an HTML component, you'll work with the **Insert/Edit Link** dialog box.
.. image:: /Images/HTML_Insert-EditLink_DBox.gif
:alt: Image of the Insert/Edit Link dialog box
For more information, see:
......@@ -129,6 +137,7 @@ To add a link to a website:
#. In the **Insert/Edit Link** dialog box, enter the URL of the website that you want in the **Link URL** field.
.. image:: Images/HTML_Insert-EditLink_Website.gif
:alt: Image of the Insert/Edit Link dialog box
#. If you want the link to open in a new window, click the drop-down arrow next to the **Target** field, and then select **Open Link in a New Window**. If not, you can leave the default value.
......@@ -148,6 +157,7 @@ You can add a link to a course unit in an HTML component.
#. Obtain the unit identifier of the unit you're linking to. To do this, open the unit page in Studio, and copy the unit ID from the **Unit Identifier** field under **Unit Location** in the right pane.
.. image:: /Images/UnitIdentifier.gif
:alt: Image of the unit page with the unit identifier circled
#. Open the HTML component where you want to add the link.
......@@ -163,6 +173,7 @@ You can add a link to a course unit in an HTML component.
identifier that you copied in step 2, and make sure to include both forward slashes (/).
.. image:: /Images/HTML_Insert-EditLink_CourseUnit.gif
:alt: Image of the Inser/Edit Link dialog box with a link to a unit identifier
#. If you want the link to open in a new window, click the drop-down arrow next to
the **Target** field, and then select **Open Link in a New Window**. If not, you can leave the default value.
......@@ -182,6 +193,7 @@ You can add a link in an HTML component to any file you've uploaded for the cour
#. On the **Files & Uploads** page, copy the URL of the file.
.. image:: Images/HTML_Link_File.gif
:alt: Image of Files and Uploads page with the URL field circled
#. Select the text that you want to make into the link.
......@@ -194,6 +206,7 @@ You can add a link in an HTML component to any file you've uploaded for the cour
Make sure to include both forward slashes (/).
.. image:: /Images/HTML_Insert-EditLink_File.gif
:alt: Image of the Inser/Edit Link dialog box with a link to a file
#. If you want the link to open in a new window, click the drop-down arrow next to
the **Target** field, and then select **Open Link in a New Window**. If not, you can leave the default value.
......@@ -238,6 +251,7 @@ Import LaTeX Code into an HTML Component
You can import LaTeX code into an HTML component. You might do this, for example, if you want to create "beautiful math" such as the following.
.. image:: Images/HTML_LaTeX_LMS.gif
:alt: Image of math formulas created with LaTeX
.. warning:: The LaTeX processor that Studio uses to convert LaTeX code to XML is a third-party tool. We recommend that you use this feature with caution. If you do use it, make sure to work with your PM.
......@@ -257,12 +271,14 @@ To create an HTML component that contains LaTeX code:
#. In the component that appears, click **upload** in the upper-right corner.
.. image:: Images/HTML_LaTeX.gif
:alt: Image of the LaTeX component with the upload button circled
#. In the dialog box that opens, select a file, and then click **Open**.
The file loads in the LaTeX editor.
.. image:: Images/HTML_LaTeXEditor.gif
:alt: Image of the LaTex editor
#. If you want to, make changes to the file.
......@@ -271,6 +287,7 @@ To create an HTML component that contains LaTeX code:
The component editor closes, and the unit page opens. You can see the way your LaTeX content looks.
.. image:: Images/HTML_LaTeX_CompEditor.gif
:alt: Image of the LaTeX component
#. On the unit page, click **Preview** to verify that your content looks the way you want it to in the LMS.
......
......@@ -42,6 +42,7 @@ The Student View of a Problem
All problems on the edX platform have several component parts.
.. image:: Images/AnatomyOfExercise1.gif
:alt: Image of a problem from a student's point of view, with callouts for elements of the problem
#. **Problem text.** The problem text can contain any standard HTML formatting.
......@@ -71,11 +72,13 @@ All problems on the edX platform have several component parts.
allow unlimited attempts.
.. image:: Images/AnatomyOfExercise2.gif
:alt: Image of a problem from a student's point of view, with callouts for attempts and showing the answer
#. **Feedback.** After a student clicks **Check**, all problems return a
green check mark or a red X.
.. image:: Images/AnatomyofaProblem_Feedback.gif
:alt: Image of feedback checkmark and x from a student's point of view
#. **Correct answer.** Most problems require that the instructor specify
a single correct answer.
......@@ -89,6 +92,7 @@ All problems on the edX platform have several component parts.
#. **Hide Answer button.**
.. image:: Images/AnatomyOfExercise3.gif
:alt: Image of a problem in the course accordian
#. **Grading.** The instructor may specify whether a group of problems
is graded. If a group of problems is graded, a clock icon appears for
......@@ -155,6 +159,7 @@ the text for you automatically. The toolbar buttons are the following:
The following image shows a multiple choice problem in the Simple Editor.
.. image:: Images/MultipleChoice_SimpleEditor.gif
:alt: Image of a problem in the simple editor
.. _Advanced Editor:
......@@ -169,6 +174,7 @@ The following image shows the multiple choice problem above in the Advanced Edit
instead of the Simple Editor.
.. image:: Images/MultipleChoice_AdvancedEditor.gif
:alt: Image of a problem in the advanced editor
.. _Problem Settings:
......@@ -188,6 +194,7 @@ are listed on the page for those problem types.)
- Show Answer
.. image:: Images/ProbComponent_Attributes.gif
:alt: Image of the problem settings dialog box
===============
Display Name
......@@ -198,6 +205,7 @@ appears as a heading over the problem in the LMS and in the course
ribbon at the top of the page.
.. image:: Images/ProbComponent_LMS_DisplayName.gif
:alt: Image of the problem in a unit page from a student's point of view
==============================
Maximum Attempts
......@@ -220,6 +228,7 @@ This setting specifies the maximum number of points possible for the
problem. The problem weight appears next to the problem title.
.. image:: Images/ProblemWeight_DD.gif
:alt: Image of a problem from a student's point of view, with the possible points circled
By default, each response field, or “answer space,” in a Problem
component is worth one point. Any Problem component can have multiple
......@@ -231,6 +240,7 @@ The following Problem component contains one text input problem,
and has just one response field.
.. image:: Images/ProblemWeight_TI.gif
:alt: Image of a text input problem from a student's point of view
Computing Scores
~~~~~~~~~~~~~~~~
......
......@@ -31,6 +31,7 @@ The control for the grade range is at the top of the Grading page.
.. image:: Images/grade_range.png
:width: 800
:alt: Image of the Grade Range control
The above example shows that you have a pass/fail grade range, with a score of 50 as the cutoff. This is the default setting used when you create a course.
......@@ -43,6 +44,7 @@ You use the grade range control to change these settings:
.. image:: Images/grade_range_b.png
:width: 800
:alt: Image of an altered Grade Range control
* To change the score range, hover the mouse over the line dividing two grades, click and drag the line left or right.
......@@ -169,11 +171,13 @@ From the course outline, click the checkmark next to the subsection. Then selec
.. image:: Images/course_outline_set_grade.png
:width: 600
:alt: Image of the assignment type for a subsection
From the Subsection page, click the text next to the **Graded as** label, then select a grading policy from the popup menu:
.. image:: Images/subsection_set_grade.png
:width: 600
:alt: Image of the assignment type on the subsection page
See :ref:`Establish a Grading Policy` for more information.
......@@ -204,4 +208,5 @@ The Student View of Grades
Once a grading policy is in place, students can view both their problem scores and the percent completed and current grade in the **Progress** tab for the course.
.. image:: Images/Progress_tab.png
:width: 800
\ No newline at end of file
:width: 800
:alt: Image of the student Progress tab
\ No newline at end of file
......@@ -116,13 +116,15 @@ When you receive notice that you can create courses, log into Studio_.
You see the following page:
.. image:: Images/first_course.png
:width: 600
:width: 600
:alt: Image of the Studio home page where you create your first course
#. Click **Create Your First Course**.
#. Enter course information as needed and click **Create**.
.. image:: Images/new_course_info.png
:width: 600
:alt: Image of the Create New Course page
.. note:: Enter new course information carefully. This information becomes part of the URL for your course. To change the URL after the course is created, you must contact edX through the Help site (http://help.edge.edx.org). Additionally, because this information becomes part of your course URL, the total number of characters in the following three fields must be 65 or fewer.
......@@ -155,6 +157,7 @@ You can also go directly to Edge_. Log in if prompted. You see the course you ju
.. image:: Images/new_course.png
:width: 600
:alt: Image of the Edge Dashboard
You can view the course and see that there is no content yet.
......@@ -190,5 +193,4 @@ If your organization has an agreement with edX and you have specific approval, y
Your course registration page opens in a new tab on the LMS.
#. Click the blue **Register** button to register for your course. After you register for your course, it opens in the LMS.
#. To continue working on your course, in your browser, switch back to the tab that shows Studio. You will
still be on the **Course Outline** page.
#. To continue working on your course, in your browser, switch back to the tab that shows Studio. You will still be on the **Course Outline** page.
......@@ -34,10 +34,12 @@ To open the course outline, on the **Content** menu, click **Outline**.
The following image shows the different elements of a course outline:
.. image:: Images/Course_Outline.gif
:alt: Image of the course outline, with callouts for sections, subsection, and units
The following image shows the way this course content appears in the LMS:
.. image:: Images/Course_Outline_LMS.gif
:alt: Image of sections from the student's point of view
.. _Sections:
......@@ -86,6 +88,7 @@ You add and delete subsections from the **Course Outline** page. You edit a subs
On the page for the subsection, you can see all the units in the subsection.
.. image:: Images/Subsection.gif
:alt: Image of the subsection page
You can also do the following.
......@@ -114,6 +117,7 @@ Subsections are divided into units. A unit, in turn, contains one or more compon
In the LMS, each unit in the subsection appears as a link on the course ribbon at the top of the page. The following image shows a subsection that has eight units:
.. image:: Images/Units_LMS.gif
:alt: Image of units from a student's point of view
You can create a unit from the course outline or the subsection page. To create a unit, click **New Unit** within the subsection that you want.
......@@ -148,6 +152,7 @@ A component is the part of a unit that contains your actual course content. A un
A student can view the name of all components in a unit by hovering over the unit in the ribbon at the top of the page.
.. image:: Images/ComponentNames_CourseRibbon.gif
:alt: Image of the component list for a unit
By default, Studio includes four types of components.
......@@ -159,6 +164,7 @@ By default, Studio includes four types of components.
To add a component to the unit, click the component type that you want under **Add New Component**.
.. image:: Images/AddNewComponent.gif
:alt: Image of adding a new component
For more information, see the documentation for the specific component type that you want:
......@@ -178,7 +184,9 @@ You can reorganize your course by dragging and dropping sections, subsections, u
To move an element, hover over the element handle on the right side of the screen until the mouse pointer changes to a four-headed arrow. Then, click and drag the element to the location that you want.
.. image:: Images/DragAndDropExample.gif
:alt: Image of the course outline, with the handle for a unit selected for drag and drop
When you move an element, a blue line indicates where the element will land when you release the mouse.
.. image:: Images/DragAndDrop_BlueLine.gif
\ No newline at end of file
.. image:: Images/DragAndDrop_BlueLine.gif
:alt: Image of the course outline, with a unit being dragged to a different location
\ No newline at end of file
......@@ -151,6 +151,7 @@ To create a draft, go to the unit's page, and then click **edit a draft** in the
.. image:: Images/Viz_Revise_EditDraft.png
:width: 800
:alt: Image of a public unit with the edit a draft link circled
When you edit a draft of a unit, you can view the unit's contents in two ways.
......@@ -159,6 +160,7 @@ When you edit a draft of a unit, you can view the unit's contents in two ways.
.. image:: Images/Viz_Revise_ViewLiveandPreview.png
:width: 800
:alt: Image of draft unit
When you're ready to publish the draft of your revised content,
click **replace it with this draft** in the right pane.
......@@ -166,6 +168,7 @@ click **replace it with this draft** in the right pane.
If you decide you don't want to keep the revised content, click **Delete Draft**.
.. image:: Images/Viz_Revise_ReplaceorDelete.png
:alt: Image of a unit settings panel with the replace it with this draft link circled
.. Warning:: Historical versions of units are not stored by Studio. After you replace the live version with a new draft, you cannot revert the unit to the previous version.
......
......@@ -17,8 +17,7 @@ unit.
- :ref:`Open Response Assessment` Open response assessment problems allow students
to enter short answer or essay responses that students or a computer
algorithm can then grade.
- :ref:`Word Cloud` Word cloud problems show a colorful graphic of the
words that students enter as responses to a prompt.
.. _ Add Advanced Component:
......@@ -28,6 +27,7 @@ By default, when you create a new component in Studio, you see the
following options.
.. image:: Images/AddNewComponent.gif
:alt: Image of the Add a New Component panel
To create a specialized problem, you must first add the Advanced
component to your course. To do this, follow these steps.
......@@ -39,6 +39,7 @@ component to your course. To do this, follow these steps.
policy key (this key is at the top of the list).
.. image:: Images/AdvancedModulesEmpty.gif
:alt: Image of the Manual Policy Definition section of the Advanced Settings page
#. Under **Policy Value**, place your cursor between the brackets, and
then enter the value for the type of problem that you want to create.
......@@ -66,6 +67,7 @@ component to your course. To do this, follow these steps.
"annotatable","combinedopenended","peergrading","word_cloud"
.. image:: Images/AdvSettings_Before.gif
:alt: Image of the Manual Policy Definition section of the Advanced Settings page, with specialized problems added
#. At the bottom of the page, click **Save Changes**.
......@@ -75,15 +77,18 @@ component to your course. To do this, follow these steps.
The text in the **Policy Value** field now appears as follows.
.. image:: Images/AdvSettings_After.gif
:alt: Image of the Manual Policy Definition section of the Advanced Settings page, with specialized problems added after saving
#. Return to the unit where you want to add the specialized problem. The
list of possible components now contains an Advanced component.
.. image:: Images/AdvancedComponent.gif
:alt: Image of the Add a New Component panel with the Advanced component option
When you click the Advanced component, you see the following list.
.. image:: Images/SpecProbs_List.gif
:alt: Image of the Advanced component list
You can now create annotations, open response assessments, and word
clouds in your course. More information about how to create each problem
......@@ -102,6 +107,7 @@ text. The questions also appear in a section below the text block, along
with space for students' responses.
.. image:: Images/AnnotationExample.gif
:alt: Image of an annotation problem
Create an Annotation Problem
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
......@@ -179,61 +185,4 @@ images, that the students upload.
Because open response assessments are more complex than most other problem types,
they have a separate section. For more information about these problems, see
:ref:`Open Response Assessment Problems`.
.. _Word Cloud:
Word Cloud
----------
In a word cloud problem, students enter words into a field in response
to a question or prompt. The words all the students have entered then
appear instantly as a colorful graphic, with the most popular responses
appearing largest. The graphic becomes larger as more students answer.
Students can both see the way their peers have answered and contribute
their thoughts to the group.
For example, the following word cloud was created from students'
responses to a question in a HarvardX course.
.. image:: Images/WordCloudExample.gif
Create a Word Cloud Problem
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To create a word cloud problem:
#. Add the Word Cloud advanced component. To do this, add the
"word_cloud" key value to the **Advanced Settings** page. (For more
information, see the instructions in :ref:`Specialized Problems`.)
#. In the unit where you want to create the problem, click **Advanced**
under **Add New Component**.
#. In the list of problem types, click **Word Cloud**.
#. In the component that appears, click **Edit**.
#. In the component editor, specify the settings that you want. You can
leave the default value for everything except **Display Name**.
- **Display Name**: The name that appears in the course ribbon and
as a heading above the problem.
- **Inputs**: The number of text boxes into which students can enter
words, phrases, or sentences.
- **Maximum Words**: The maximum number of words that the word cloud
displays. If students enter 300 different words but the maximum is
set to 250, only the 250 most commonly entered words appear in the
word cloud.
- **Show Percents**: The number of times that students have entered
a given word as a percentage of all words entered appears near
that word.
#. Click **Save**.
For more information, see `Xml Format of "Word Cloud" Module
<https://edx.readthedocs.org/en/latest/course_data_formats/word_cloud/word_cloud.html#>`_.
\ No newline at end of file
:ref:`Open Response Assessment Problems`.
\ No newline at end of file
......@@ -87,12 +87,14 @@ Step 1. Add LTI to the Advanced Modules Policy Key
policy key (this key is at the top of the list).
.. image:: Images/AdvancedModulesEmpty.gif
:alt: Image of the advanced_modules key in the Advanced Settings page
#. Under **Policy Value**, place your cursor between the brackets, and
then enter **“lti”**. Make sure to include the quotation marks, but
not the period.
.. image:: Images/LTI_Policy_Key.gif
:alt: Image of the advanced_modules key in the Advanced Settings page, with the lti value added
**Note** If the **Policy Value** field already contains text, place your
cursor directly after the closing quotation mark for the final item, and
......@@ -225,6 +227,7 @@ For example, the following word cloud was created from students'
responses to a question in a HarvardX course.
.. image:: Images/WordCloudExample.gif
:alt: Image of a word cloud problem
Create a Word Cloud Exercise
----------------------------
......@@ -276,6 +279,7 @@ The example below is from 7.00x: Introduction to Biology and shows a subset of t
biochemical reactions that cells carry out.
.. image:: Images/Zooming_Image.gif
:alt: Image of a zooming image
Create a Zooming Image Tool
---------------------------
......
......@@ -34,6 +34,7 @@ You can enter Preview mode in two ways.
.. image:: Images/preview_draft.png
:width: 800
:alt: Image of a subsection with the Preview Drafts button circled
* On any Unit page, click **Preview**.
......@@ -42,6 +43,7 @@ You can enter Preview mode in two ways.
.. image:: Images/preview_public.png
:width: 800
:alt: Image of a public unit with the Preview button circled
The following example shows the **Preview** button for a unit that
......@@ -49,6 +51,7 @@ You can enter Preview mode in two ways.
.. image:: Images/preview_private.png
:width: 800
:alt: Image of a private unit with the Preview button circled
.. _View Your Live Course:
......@@ -67,14 +70,17 @@ You can view the live course from three different places in Studio:
.. image:: Images/course_outline_view_live.png
:width: 800
:alt: Image of the course outline with the View Live button circled
* Any Subsection page.
.. image:: Images/subsection_view_live.png
:width: 800
:alt: Image of a subsection with the View Live button circled
* The Unit page, if the Unit is Public.
.. image:: Images/unit_view_live.png
:width: 800
:alt: Image of a unit with the View Live button circled
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment