Instructions for creating a course with lessons

1. Go to Dashboard. On the left hand side menu, hover over over Courses and click on Add New.
2. You should be taken to a new page to enter your course. Under the Edit Course label, enter the course title and, in the upper right hand corner, click Save Draft.
3. Copy the course title.
4. On the left hand side menu, hover over over Lessons and click on Add New.
5. Add Lesson title.
6. Then scroll all the way to the bottom of the window, and paste (or type) the exact course title in the Course Name field.
7. Enter some content into the large field in your Lesson’s entry view, below the Add Media button and text editing tools.
8. Then, in the upper right hand corner,  click the Publish button.
9. In the upper right hand corner of the window, click Save Draft.
10. On the left hand side menu, hover over over Courses and click on All Courses.
11. When you see a list of courses, then hover just under your course’s title and click on the Edit link.
12. Enter some introductory content for your course.
13. Then, in the upper right hand corner,  click the Publish button.
14. To view the course as a student or other reader, click on the link to the right of “Permalink:” beneath the title.

Editing your a course and lessons

As a Corsbook author, you can go back and edit your courses and lessons at any time. Just go to the Courselist or Lessons list, and click Edit beneath the content item title. Remember save your work by clicking the relevant button, which might be Save Draft, Update, or Publish, all in the upper right hand corner in the Publish pane.

Suggestion: first create a list of your planned lessons. The create the lessons in reverse order of the order for them to be read. They will then appear in your desired order for readers. If you ever need to change the order, please contact the Corsbook administrator.

Caveat: if you change your course title, you will need to change it in each of the lessons for that course.

Backing Up Your Contents

You should periodically back-up your course by periodically generating a PDF of your course. This is accomplished by clicking the Print book for this course button on the course page. Back-ups are made of the entire Corsbook site, the the availability of such back-ups cannot be guaranteed.

Setting up course navigation and searchability

You can go ahead and create a course on your own. Linked titles for all of the lessons for the course should appear on the course page. However, once a reader is in a lesson, there may be additional set-up required for the links to and previous and next lesson to work as desired. The first step is to contact the administrator to set up a category for your course. It could have the same title as your course. However, it does not have to have the same title, but it should be different from any existing category.

Once the category is set up, then select it for any lesson that you wish to appear in the footer navigation. However, do not select a category if you wish to omit it from footer navigation. For example, you might wish to have break-out lessons for students who need extra practice or background, but which would not be appropriate for all of your students.

Accessibility

To maximize the impact of your content, you should make it accessible to a  range of users with diverse abilities, backgrounds and devices. Further, some organizations require content to be accessible per various standards. For further information, see Accessibility and Universal Design.

(Excerpts below taken from WordPress.org.)

Title/Headline Box

The title of your post. You can use any phrases, words or characters. Avoid using the same title twice as that will cause problems. You can use commas, apostrophes, quotes, hyphens/dashes and other typical symbols in the post like “My Site – Here’s Lookin’ at You, Kid”. WordPress will then clean it up to generate a user-friendly and URL-valid name of the post (also called the “post slug”) to compose the permalink for the post.

Body Copy Box

The blank box where you enter your writing, links, links to images, and any information you want to display on your site. You can use either the Visual or the Text view to compose your posts. For more on the Text view, see the section below, Visual Versus Text View.

Preview button

Allows you to view the post before officially publishing it.

Publish box

Contains buttons that control the state of your post. The main states are Published, Pending Review and Draft. A Published status means the post has been published live on your blog for all to see. Pending Review means the draft is waiting for review by an editor prior to publication. Draft means the post has not been published and remains a draft for you. If you select a specific publish status and click the update post or “Publish” button, that status is applied to the post. For example, to save a post in the Pending Review status, select Pending Review from the Publish Status drop-down box, and click Save As Pending. To schedule a post for publication on a future time or date, click “Edit” in the Publish area next to the words “Publish immediately”. You can also change the publish date to a date in the past to back-date posts. Change the settings to the desired time and date. You must also hit the “Publish” button when you have completed the post to publish at the desired time and date.

Publish box

Visibility – This determines how your post appears to the world. Public posts will be visible by all website visitors once published. Password Protected posts are published to all, but visitors must know the password to view the post content. Private posts are visible only to you (and to other editors or admins within your site)

Save

Allows you to save your post as a draft / pending review rather than immediately publishing it. To return to your drafts later, visit Posts – Edit in the menu bar, then select your post from the list.

Publish

Publishes your post on the site. You can edit the time when the post is published by clicking the Edit link above the “Publish” button and specifying the time you want the post to be published. By default, at the time the post is first auto-saved, that will be the date and time of the post within the database.

Good design tends to be accessible by a diverse a range of users, including users with visual and other impairments. This approach is called Universal Design. Further, many schools and organizations require materials to be accessible by all students. While this page won’t cover everything, it will provide some suggestions to improve accessibility.

Color and Contrast

Some students are color blind. They can’t differentiate between reds and greens. So avoid pure red or green, or make the colored content clearly differentiable. For example, instead of using red and green check marks, you could wither use blue or orange ones, or use a different symbol for each case.

Some students can’t read low contrast content. For example, black lettering upon a dark blue background might not be readable. So make certain to include a sufficiently high contrast.

Image Alternative Text

The visually-impaired often cannot perceive images. This can be somewhat mitigated by including a description in the Alt Text field for the media (see the metadata fields for media items in the Media Library). Alt Text should not merely repeat the caption. It should add descriptive information for those who cannot see the image. For example, the alt text for a volcano could be “pointed mountain with smoke puffing out of top”.

Captioning

To help audio-impaired persons, videos should ideally be captioned. There are several services who will do this as well as software that allows you to enter such. An alternative that might be sometimes acceptable is to provide a transcript of the video that includes some description of visual elements.

Captioning can also be very helpful to readers whose primary language is different than that of the speakers in the video, or to those accustomed to a different accent.

Interactive Content

Interactive content, such as embedded or linked Javascript applets, can be a challenge for the impaired to fully use, and often don’t even work in all platforms for any users. You should provide an alternative for interactive content just in case it won’t work for some users.

Further Reading

• Universal design (Wikipedia)
• Web Content Accessibility Guidelines (WCAG)
• How to Write Alt Text and Image Descriptions for the visually impaired (Perkins)
• Image ALT Text includes examples of how to write Alt Text(Pennsylvania State University)

Files

Sometimes you will want to upload files for readers to download, such as a text document, spreadsheet, etc. Many documents can contain malware. Compressing these files into a ZIP file makes them both easier to download and safer.

• If just one file, then zip (compress) that file.
• If multiple files, place the files in a folder, then zip (compress) the folder.
• Upload the zip file.

Short Codes

Corsbook is built on top of the WordPress open source software. It is possible to add additional functionality in WordPress using small snippets of code called shortcodes. Short codes are enclosed in “[…]” and “[/…]” punctuation. An example which will hide enclosed contents is:

Tables

You can also use [table]…[/table] short codes, with values in between, e.g.

[table]
Year,Make,Model,Length
1997,Ford,E350,2.34
2000,Mercury,Cougar,2.38
[/table]

which will produce a table such as:

An example of an HTML and CSS table is:

Images

You can often just copy and paste images into your Corsbook content. However, the preferred way is to first click on the Add Media button and upload the image into the Media Library, then insert it into your content. Make sure to enter the metadata including Alt Text to improve accessibility. You should enter the source and copyright information into the Description field.

Videos

Use the same approach for videos as for images. You might need to manually add your own caption in the content field rather than in metadata. There is no Alt Text field for videos, but ideally there should be captioning.

• TIP! To avoid videos appearing in the print version of your course, embed videos in the following short codes: [iframe class="noprint" src="your source"]] and [[/iframe]. The “scr” refers to the URL of the video, and “class” tells the video not to appear in the print version (which would show up as a blank space).

Quizzes

Corsbook presently provides two options for creating quizzes. WP-Pro-Quiz (see left hand side menu) is a more traditional, low-profile tool. It is not being updated, but it still seems to work OK. For a more modern look, H5P capability is provided (also see left hand side menu).

Mathematics

You can directly type some mathematics using the existing text editing tools, such as E = mc².  You can also use the Ω text tool to enter special symbols, such as ½, Ψ and π.You can insert equations as images, although this might be difficult for the visually-impaired to read. If so, make sure to enter an alternative text.If you know latex, then  you  insert LaTeX code between the following short codes:

[latex]Your LaTeX code [/latex].

Hidden Text

You might wish to use hidden text for notes to yourself or an editor, or for content that is not ready to be viewed by the public. As indicated above, place your content between the short codes.

[hide]This is my secret text[/hide].

Warning! No guarantee is made that this hidden text won’t sometimes be visible to the public. For example, there could be a system bug or glitch that might temporarily deactivate all short codes. Or, you might make an entry mistake or omit the closing short code.

Alert Messages

You can add a message or alert the will popup as soon as a reader goes to a page, such as a course or lesson. Use  the sheetmessage short code:

[sheetmessage message="Turn in Assignment #1!"]

Use the message parameter to enter the text for your message.

Embedding Other Content

When you need to embed content, and the above methods are insufficient, you can try iframe. To use this on Corsbook, use the [iframe][/iframe] shortcode. For example:

[iframe src="https://www.nasa.gov/mission_pages/mars/images/index.html"][/iframe].

This will display the source contents:

.NASA video shown in web version.

Here are some useful parameters for iframe:

• height (examples: height=”50%”, height=”300px”)
• width (examples: width=”100%”, width=”200px”)

Here is another example with lots of parameters.

You can find additional parameters, such as for sizing, at the iframe site.

There are a few ways you can make iframe better for print and accessibility:

• class=”noprint” after the word iframe will prevent the contents from showing up in the PDF and print media.
• alt=”your visual description” is used after the word iframe or the class statement to tell accessibility-enabled devices what would have been seen in the iframe.
• <span class="nodisplay">NASA video shown in web version.</span> can be in text mode used after the enclosing iframe short code to provide a description that will only appear in the PDF and print modes.

There are several formatting options for computer code.Each approach has a different look, features, advantages and disadvantages. While you have several choices, you should try to use the options consistently within a course. (Be warned that some types of code will produce problematic results, so test everything in preview before publishing.)

Preformatted Text

The simplest approach is to use the Preformatted option under the text type menu. This will produce monospaced code. You can add shading by going to the Text tab. You will see your code contained in pre elements. You can add a Corsbook style, such as class=”box-lavender”, by adding the class in the pre element such as:

<pre class="box-lavender">

to place the code within a shaded box for gentle emphasis. For example:

# My ruby program 
# Greet user 
    puts "Hello" 
# Do some math
    x = 1 
    puts x 
# Set a string variable
    myname = 'mark'

Enlighter

Another method is via the Enlighter utility. Use the Code Insert tool in the editing toolbar. Enlighter will sometimes protect against problematic code and sometimes preserves the indentation better. You can choose the language for semantic formatting. You can highlight lines of code turn line numbers on and off. After you create a code block, you can then change its appearance (theme) and other settings by hovering over the code and clicking on the pencil tool. A simple sample is below.

# My ruby program 
# Greet user 
    puts "Hello!" 
# Do some math
    x = 1 + 2 
    puts x 
# Set a string variable
    myname = 'mark'

Code Shortcode

Finally, you can enclose the lines of code in short codes, such as: code … /code. You can specify some of the most common languages using this format: code lang=”ruby” …/code.

Remember to use “[” and “]” around your short codes. Line numbers will be displayed along with some syntax coloring. A list of supported languages and other information can be found at Syntax Highlighter Evolved support page.  Here is an example of code formatted using the last option:

[code lang=”ruby”]
# My ruby program
# Greet user
puts “Hello!”
#Do some math
x = 1 + 2
puts x
# Set a string variable
myname = ‘mark’
[/code]

Simplecode Shortcode

Yet another approach is to use the simplecode shortcode. You can simpley type simplecode … /simplecode, or you can specify a background color, for example, simplecode color=”Azure” Your content… /simplecode.For example,

[simplecode color="Azure"]Your content… [/simplecode].

You should use light background colors. Examples of light background colors include Azure, AliceBlue, BlanchedAlmond, Cornsilk, FloralWhite, Gainsboro, HoneyDew, Lavender, LavenderBlush, LemonChiffon, MistyRose and SeaShell. See the W3Schools Color Picker for further choices. If you don’t include a color choice, the default is lavender. Below is an example using the color Azure:

 
# My ruby program
    puts "Hello!" 
#Do some 
    math x = 1 + 2 
    puts x 
# Set a string variable 
    myname = 'mark' 

Running Code Inside of a Lesson

None of the above options will run computer code from within the browser window. Some such utilities exist, but use them at your own risk. Some will not work with Corsbook, while other might only run for a limited amount of time.

Basic Styling Tools and Techniques

It is best to try to first see if you can use any of Corsbook’s existing styling and formatting tools. While editing a course or lesson, you should fully explore the editing toolbar above the content entry field. You can see the function of each tool by hovering over its icon. There are tools for formatting text as headings, with bold and italics, superscript and subscript and with color. There are several indentation and alignment tools. There is a special character menu, and tools for tables, list, links and code. There is a keyboard shortcuts menu with even more options.

Text Mode—Your Doorway to Advanced Styling

Above the content entry field, you can see two editing mode tabs: Visual and Text. You have likely only been working in Visual mode. Text mode is ultimately more powerful, but more challenging to understand and use. Open up one of your more complicated lessons in a new tab or window. Click on the Text tab and examine the contents (but don’t change anything). You might see styling tags such as h2, and  . These are HTML content tags. You might also see something like span style=”background-color: #ffcc99;”. This is CSS styling code. CSS stands for Cascading Style Sheets. (See Further Reading  below for more information about CSS).

While in Text mode, You can use snippets of CSS code to add styling to your content. You can just use the suggested code below. Or, if you want to write your own CSS code, see Further Reading below. Beware that not all CSS code will work in Corsbook, so test your code in Preview before publishing it. Also, you will need to use CSS inline styling (which is the kind you see in the Text tab mode).

Classes

Classes are a CSS approach to categorize styling. You should enclose them in html tags, such as division <div> or  paragraph <p> tags. For example, to style a division, you would enter <div class=”box-gray-w-border”> Your content…<div> in Text mode. Always make sure to enter the closing tag.

Boxes

Boxes With Borders

Further Reading

• HTML Styles – CSS
• CSS Tutorial

(Much of the following was written by WordPress.org and is subject to their copyrights and license).

When writing your post, you have the option of using the Visual or Text mode of the editor. The visual mode lets you see your post as is, while the Text mode shows you the code and replaces the WYSIWYG editor buttons with quicktags. These quicktags are explained as follows.

• b – <strong></strong> HTML tag for strong emphasis of text (i.e. bold).
• i – <em></em> HTML tag for emphasis of text (i.e. italicize).
• b-quote – <blockquote></blockquote> HTML tag to distinguish quoted or cited text.
• del – <del></del> HTML tag to label text considered deleted from a post. Most browsers display as striked through text.
• link – <a href=”http://example.com”></a> HTML tag to create a hyperlink.
• ins – <ins></ins> HTML tag to label text considered inserted into a post. Most browsers display as underlined text.
• ul – <ul></ul> HTML tag will insert an unordered list, or wrap the selected text in same. An unordered list will typically be a bulleted list of items.
• ol – <ol></ol> HTML tag will insert a numbered list, or wrap the selected text in same. Each item in an ordered list is typically numbered.
• li – <li></li> HTML tag will insert or make the selected text a list item. Used in conjunction with the ul or ol tag.
• code – <code></code> HTML tag for preformatted styling of text. Generally sets text in a monospaced font, such as Courier.
• more – <!–more–> WordPress tag that breaks a post into “teaser” and content sections. Type a few paragraphs, insert this tag, then compose the rest of your post. On your blog’s home page you’ll see only those first paragraphs with a hyperlink ((more…)), which when followed displays the rest of the post’s content.
• page – <!–nextpage–> WordPress tag similar to the more tag, except it can be used any number of times in a post, and each insert will “break” and paginate the post at that location. Hyperlinks to the paginated sections of the post are then generated in combination with the wp_link_pages() or link_pages() template tag.
• lookup – Opens a JavaScript dialogue box that prompts for a word to search for through the online dictionary at answers.com. You can use this to check spelling on individual words.
• Close Tags – Closes any open HTML tags left open–but pay attention to the closing tags. WordPress is not a mind reader (!), so make sure the tags enclose what you want, and in the proper way.

Workflow Note – With Quicktag buttons that insert HTML tags, you can for example click i to insert the opening <em> tag, type the text to be enclosed, and click /i or Close Tags to insert the closing tag. However, you can eliminate the need for this ‘close’ step by changing your workflow a bit: type your text, select the portion to be emphasized (that is, italicized), then click i and your highlighted text will be wrapped in the opening and closing tags.

To reorder your lessions

1. In the Lessons menu, choose Re-Order.
2. Drag the Lesson bars into your desired order.

Accessibility

To maximize the impact of your content, you should make it accessible to a  range of users with diverse abilities, backgrounds and devices. Further, some organizations require content to be accessible per various standards. For further information, see Accessibility and Universal Design.

Short Codes

Corsbook is built on top of the WordPress open source software. It is possible to add additional functionality in WordPress using small snippets of code called shortcodes. Short codes are enclosed in “[…]” and “[/…]” punctuation. An example which will hide enclosed contents is:

LaTeX

You can insert LaTeX by using the following short codes:

Tips & Troubleshooting

• Embed videos in the following short codes: [iframe class="noprint" src="your source"]] and [[/iframe]. The “scr” refers to the URL of the video, and “class” tells the video not to appear in the print version (which would show up as a blank space).

Advanced Styling

To add advanced styling, please see Special CSS Styling.

General Information

Excerpts below taken from WordPress.org.

Descriptions of Post Fields

Title/Headline Box

The title of your post. You can use any phrases, words or characters. Avoid using the same title twice as that will cause problems. You can use commas, apostrophes, quotes, hyphens/dashes and other typical symbols in the post like “My Site – Here’s Lookin’ at You, Kid”. WordPress will then clean it up to generate a user-friendly and URL-valid name of the post (also called the “post slug”) to compose the permalink for the post.

Body Copy Box

The blank box where you enter your writing, links, links to images, and any information you want to display on your site. You can use either the Visual or the Text view to compose your posts. For more on the Text view, see the section below, Visual Versus Text View.

Preview button

Allows you to view the post before officially publishing it.

Publish box

Contains buttons that control the state of your post. The main states are Published, Pending Review and Draft. A Published status means the post has been published live on your blog for all to see. Pending Review means the draft is waiting for review by an editor prior to publication. Draft means the post has not been published and remains a draft for you. If you select a specific publish status and click the update post or “Publish” button, that status is applied to the post. For example, to save a post in the Pending Review status, select Pending Review from the Publish Status drop-down box, and click Save As Pending. To schedule a post for publication on a future time or date, click “Edit” in the Publish area next to the words “Publish immediately”. You can also change the publish date to a date in the past to back-date posts. Change the settings to the desired time and date. You must also hit the “Publish” button when you have completed the post to publish at the desired time and date.

Publish box

Visibility – This determines how your post appears to the world. Public posts will be visible by all website visitors once published. Password Protected posts are published to all, but visitors must know the password to view the post content. Private posts are visible only to you (and to other editors or admins within your site)

Save

Allows you to save your post as a draft / pending review rather than immediately publishing it. To return to your drafts later, visit Posts – Edit in the menu bar, then select your post from the list.

Publish

Publishes your post on the site. You can edit the time when the post is published by clicking the Edit link above the “Publish” button and specifying the time you want the post to be published. By default, at the time the post is first auto-saved, that will be the date and time of the post within the database.

Course

This designates the course. It is primarily for the purpose of exclusively connecting lessons associated with a particular course.

Custom Fields

Custom_Fields offer a way to add information to your content. Use this feature to associate courses with lessons. The is the primary association means.

Post Author

A list of all blog authors you can select from to attribute as the post author. This section only shows if there are multiple users with authoring rights.

Visual Versus Text Editor

When writing your post, you have the option of using the Visual or Text mode of the editor. The visual mode lets you see your post as is, while the Text mode shows you the code and replaces the WYSIWYG editor buttons with quicktags. These quicktags are explained as follows.

• b – <strong></strong> HTML tag for strong emphasis of text (i.e. bold).
• i – <em></em> HTML tag for emphasis of text (i.e. italicize).
• b-quote – <blockquote></blockquote> HTML tag to distinguish quoted or cited text.
• del – <del></del> HTML tag to label text considered deleted from a post. Most browsers display as striked through text.
• link – <a href=”http://example.com”></a> HTML tag to create a hyperlink.
• ins – <ins></ins> HTML tag to label text considered inserted into a post. Most browsers display as underlined text.
• ul – <ul></ul> HTML tag will insert an unordered list, or wrap the selected text in same. An unordered list will typically be a bulleted list of items.
• ol – <ol></ol> HTML tag will insert a numbered list, or wrap the selected text in same. Each item in an ordered list is typically numbered.
• li – <li></li> HTML tag will insert or make the selected text a list item. Used in conjunction with the ul or ol tag.
• code – <code></code> HTML tag for preformatted styling of text. Generally sets text in a monospaced font, such as Courier.
• more – <!–more–> WordPress tag that breaks a post into “teaser” and content sections. Type a few paragraphs, insert this tag, then compose the rest of your post. On your blog’s home page you’ll see only those first paragraphs with a hyperlink ((more…)), which when followed displays the rest of the post’s content.
• page – <!–nextpage–> WordPress tag similar to the more tag, except it can be used any number of times in a post, and each insert will “break” and paginate the post at that location. Hyperlinks to the paginated sections of the post are then generated in combination with the wp_link_pages() or link_pages() template tag.
• lookup – Opens a JavaScript dialogue box that prompts for a word to search for through the online dictionary at answers.com. You can use this to check spelling on individual words.
• Close Tags – Closes any open HTML tags left open–but pay attention to the closing tags. WordPress is not a mind reader (!), so make sure the tags enclose what you want, and in the proper way.

Workflow Note – With Quicktag buttons that insert HTML tags, you can for example click i to insert the opening <em> tag, type the text to be enclosed, and click /i or Close Tags to insert the closing tag. However, you can eliminate the need for this ‘close’ step by changing your workflow a bit: type your text, select the portion to be emphasized (that is, italicized), then click i and your highlighted text will be wrapped in the opening and closing tags.