From CDS 130

Jump to: navigation, search

Use this page for course development notes that do not need to be password protected.


  1. About
  2. Important Links
  3. Software
  4. Wiki
    1. Show Hide
    2. Syntax Highlighting
    3. Images from repository
    4. Graph paper
    5. Basic
    6. Page titles
    7. Special Characters in MediaWiki
    8. Style
    9. Facebook integration
    10. Attach a ppt/doc file
    11. Re-using content
    12. Presentation Mode
    13. Recent Changes
    14. Monospace formatting
    15. Lists
    16. Transclusion
    17. Spacing for printing
    18. Page break for printing
    19. Image galleries
    20. Image wrapping
    21. Tables
      1. Top-bottom tables
      2. Left-right tables
    22. Save html page
  5. Creating Screencasts

1. About has been developed by Bob Weigel <> [1], John Wallin <>, and Joe Marr <>. Joseph Mcgrady has provided media and developed the "Presentation Mode" for the page contents (press [F10] for more information).

Partial support for some of the content was provided by a Faculty Development in the Space Sciences grant from NSF, a Curriculum for an Undergraduate Program in Data Sciences grant from NSF, and GMU's Center for Teaching Excellence Curriculum Innovation Grant Program.

2. Important Links

  • Detailed password protected notes by Bob and Joe have been moved to [2]
  • Spreadsheets used in lecture demos [3]
  • Proposal and final report for development of parts of this wiki: documents/cig
  • Proposal for development of distance education version of CDS 130: documents/de
  • Presentation about this course and wiki: presentations/cig
  • A few CDS 130 teaching reflections: presentations/csaapt
  • SACS IT accreditation assessment documents: ITAssessment
  • Intro to Computer Science in Python: [4]
  • Genetic algorithm car design [5]

3. Software

This course uses the MediaWiki content management system version 1.11. The server admins are Brian Curtis and Bob Weigel.

4. Wiki

4.1. Show Hide

Question: How many?

{| class="wikitable collapsible collapsed"
! align="left" |&nbsp;Answer

4.2. Syntax Highlighting

<source lang="bash"> Code here </source>

4.3. Images from repository


4.4. Graph paper


4.5. Basic

If you would only like to simply add unformatted text, do the following

Create an account Log in and click on a storm page in the first column of the table of above. Click on the "edit" tab near the top of the page. Enter text and then select save.

Your changes will appear immediately.

If you would like to add links, images, or format the page contents, see (15-30 minutes)

Overview of MediaWiki: (Wikipedia uses the same software, MediaWiki, as ViRBO)

More advanced:

All syntax:

Uploads of images and data files (< 50 MB): (use
to create a link to a data file that you will upload). If you would like to contribute a data file that is not available on a public web site and is larger than 50 MB, contact

Formatting images: Tables:

4.6. Page titles

Example Title
<b><center><font size="+2">Example Title</font></center></b>

4.7. Special Characters in MediaWiki

Select view page source or edit and copy the character from the text area and paste into the text area: (longer list [6]):

Misc characters:

Greek characters: α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ ς τ υ φ χ ψ ω Γ Δ Θ Λ Ξ Π Σ Φ Ψ Ω

Math characters: ∫ ∑ ∏ √ − ± ∞ ≈ ∝ ≡ ≠ ≤ ≥ × · ÷ ∂ ′ ″ ∇ ‰ ° ∴ ø ∈ ∩ ∪ ⊂ ⊃ ⊆ ⊇ ¬ ∧ ∨ ∃ ∀ ⇒ ⇔ → ↔ ↑ ℵ ∉

Unicode notation is also allowed using a span element with class Unicode:


4.8. Style

To change the style of a page (fonts, positions, etc.), edit MediaWiki:Common.css. To figure out how things work, use Firebug in Firefox or right-click->inspect element in Chrome to test the effect of different changes in the css. You will need to do a shift+reload after every save of the page and you may need to append "action=purge" to a page if it does not seem like new css is being applied.

4.9. Facebook integration

See [7] to get an iframe link and wrap it as shown when editing this section.

4.10. Attach a ppt/doc file

To upload a file, edit the page and enter text similar to this [[Image:My_File_Name.ppt|Description of My File]]. When you select save, you will see that there is now a red link as in Image:My File Name.ppt.

When you select the red link, you will be taken to an upload page (or a login page if you have not created an account).

4.11. Re-using content

  1. Create your class page with the year, semester, and section number (for example, 2011S001, 2010F001, 2010F002).
  2. If you would like to create a different version of a module, create a page weigel/Introduction that is initially an exact copy of the contents of the "reference" page Introduction. On your class web page, remember to always link to your version of the module (weigel/Introduction).
  3. At the end of the semester we will discuss additions to the "reference" page based on instructor feedback.

4.12. Presentation Mode

  • Select Tools->Presentation Mode for instructions
  • Key keys: F5 to start/stop and F4 to show/hide TOC

4.13. Recent Changes

  • Select Tools->Recent Changes

4.14. Monospace formatting

  2 3 6 5 8
+ 4 1 2 4 8

Wrap the following with the usual open/close tags

pre style="font-family:monospace;border:1px solid black;width:7em"

4.15. Lists

MediaWiki's syntax cannot handle the following cases; use regular HTML instead.

<ol type="1">
  1. First
  2. Second
  3. Third
<ol type="A">
  1. First
  2. Second
  3. Third
<ol type="a">
  1. First
  2. Second
  3. Third
<ol type="I">
  1. First
  2. Second
  3. Third
<ol type="i">
  1. First
  2. Second
  3. Third

4.16. Transclusion

For aggregation of select sections into a single page using the extension

For example, insert the following to have the contents of the Questions section of Binary_Representation_of_Numbers placed on the page that you are editing:


4.17. Spacing for printing

These will only result in spaces when printing:

<br class="print"/><br class="print"/><br class="print"/><br class="print"/><br class="print"/>

4.18. Page break for printing

To force a page break when printing, insert this

<div style="page-break-before: always"> </div>

4.19. Image galleries


| [[Image:...]]
| [[Image:...]]
| [[Image:...]]

4.20. Image wrapping

To prevent text from wrapping around an image, insert a break after the image call

 <br style="clear:both"/>

4.21. Tables

Table css:

See also:

row 1, column 1 row 1, column 2
row 2, column 1 row 2, column 2
row 3, column 1 row 3, column 2

{| cellpadding="10" cellspacing="0" border="1"
|row 1, column 1
|row 1, column 2
|row 2, column 1
|row 2, column 2
|row 3, column 1
|row 3, column 2

4.21.1. Top-bottom tables

{| cellpadding = "5" style = "text-align: center;"
Top Content
Bottom Content

4.21.2. Left-right tables

{| style="margin-bottom:1em" border="0" cellpadding="2" width="100%" align="left"
|style="vertical-align:top" width="50%" |

4.22. Save html page

"File->Save" will not result in a simple html file that can be viewed offline. See [8] for instructions on creating a local copy.

5. Creating Screencasts

To create videos that render clearly on YouTube:

  • Install XVid Codec. Restart BB Recorder. Record or edit a video.
  • Select File->Export As" then "Other formats->AVI->Xvid MPEG-4 Codec"
  • Select "Configure->HD 720"
Retrieved from ""
Personal tools