Sugar Labs

Activities/Learn: Difference between revisions

← Older edit
Tony37 (talk | contribs)
184 edits
Tony37 (talk | contribs)
184 edits
 
(17 intermediate revisions by 2 users not shown)
Line 12: Line 12:
Learn is a component of the Karma Learning System. When installed as a part of KLS, it is tightly integrated with the schoolserver. The primary design goal is to provide local copies of lessons as needed so that the student can use them when not connected to the school server.
Learn is a component of the Karma Learning System. When installed as a part of KLS, it is tightly integrated with the schoolserver. The primary design goal is to provide local copies of lessons as needed so that the student can use them when not connected to the school server.


Version 51 enables evaluation of the activity independently of a schoolserver by using a USB removable drive.
Version 61 enables evaluation of the activity independently of a schoolserver by using a USB removable drive.




Line 27: Line 27:
,you should see /media/XXX (where XXX is the label of your removable drive).
,you should see /media/XXX (where XXX is the label of your removable drive).


The Learn activity requires a recent (4+) version of Firefox. While Firefox is installed on versions of  
On 12.0.1 and later releases use /run/media/olpc/XXX.
Sugar with the Gnome desktop, the version precedes version 4.
 
Make sure the label XXX does not have spaces. A label such as /media/kls is fine. A label such as
/media/Store N Go does not work.
 
The Learn activity requires a recent (12+) version of Firefox. While Firefox is installed on versions of  
Sugar with the Gnome desktop, the version doe not provide the needed capabilities.


From the Firefox website, download the compressed Firefox file, e.g. firefox-*.tar.bz2, where '*' is the  
From the Firefox website, download the compressed Firefox file, e.g. firefox-*.tar.bz2, where '*' is the  
version number of the latest Firefox release, e.g. 13.0. Copy this file to the XXX drive.  
version number of the latest Firefox release, e.g. 16.0. Copy this file to the XXX drive.  


From this website download these files and copy them to the XXX drive:
From this website download these files and copy them to the XXX drive:


[[Image:Kls_demo_1.tar.bz2]] is a 45mb file which contains the sample content for the Learn activity
[[File:Kls_demo_2.tar.bz2]] is a 50mb file which contains the sample content kls and other files
for the Learn activity. Unpack it with the command:


[[File:Learn.sh]] is a script which installs Learn from the bundle.
tar -xvjf Kls_demo_2.tar.bz2


[[File:Firefox.sh]] is a script which installs Firefox from the tar file on the XXX drive. It also
This populates the drive with the scripts and the kls folder which contains the sample content. Optionally, delete the compressed file: Kls_demo_2.tar.bz2:
modifies two files in Sugar: sugar-launch and SimpleHTTPServer.py. These changes have no effect on
normal Sugar use.


Download learn-51.xo from the Activities.Sugarlabs.org site. Copy this bundle to the XXX drive.
rm -rf Kls_demo_2.tar.bz2
 
xo-custom is a script which sets up the XO to use the Learn.activity. It installs Firefox from the tar file on the XXX drive. It  modifies two files in Sugar: sugar-launch and SimpleHTTPServer.py. Finally it sets up the XO to start the localhost daemon at boot. These changes do not affect normal operation of Sugar.
 
Download learn-61.xo from the activities.sugarlabs.org site. Copy this bundle to the XXX drive.
Download showntell-12.xo from the Activities.Sugarlabs.org. Copy this bundle to the xxx drive.


When this is done, the command: ls /media/XXX should show the following:
When this is done, the command: ls /media/XXX should show the following:


  firefox-*.tar.bz2
  firefox-*.tar.bz2
  Firefox.sh
  kls
  Kls_demo_1.tar.bz2
  Kls_demo_2.tar.bz2
  learn-51.xo
  learn-61.xo
  Learn.sh
  localhost.service
rc.local
readme
showntell-12.xo
SimplerHTTPServer.py
sugar-launch
xo-custom


===Execute the install scripts===
===Execute the install script===
Now mount the XXX drive on the XO.
Now mount the XXX drive on the XO.
   
   
Line 60: Line 75:
Enter the commands:
Enter the commands:


  cd /media/XXX
  cd /media/XXX or cd /run/media/olpc/XXX
./Learn.sh
  bash xo-custom
  sudo ,/Firefox.sh


Upon completion of these commands, the script shuts down the XO.
Upon completion of these commands, the script shuts down the XO.
Line 81: Line 95:
In 'Tabs', uncheck 'Always show the tab bar'. Students do not normally use tabs in Firefox.
In 'Tabs', uncheck 'Always show the tab bar'. Students do not normally use tabs in Firefox.


Students are advised to set View to fullscreen. Fortunately current versions of Firefox start in fullscrren
Customize the navigation toolbar. Add the full-screen icon. Choose small icons. In a deployment without internet, the Google icon can be removed.
when shut down in that mode. There is apparently no way to specify that Firefox launch in full screen mode and, currently, there is no way to access F11 on the XO (even in Gnome desktop!).
 
Students are advised to use fullscreen mode.


Firefox tries to refresh pages from a cache in memory. This can sometimes prevent changes in screens to be immediately visible. In this case, use alt+F5 to refresh the page from the source. Note: on the XO keyboard,  
Firefox tries to refresh pages from a cache in memory. This can sometimes prevent changes in screens to be immediately visible. In this case, use alt+F5 to refresh the page from the source. Note: on the XO keyboard,  
Line 395: Line 410:


===Adding Images===
===Adding Images===
===Adding Audio Clips===
===Using Karma Templates===
===Using Sugar Activities===


==Update==
[[Image:image_1.png]]


[[Image:example_activity.png]]
Clicking on the camera icon in the header will (after some moments) show this screen. It shows thumbnails of all
of the images available to be added to the lesson. In this case, these are the screen shots I used in
preparing this page.  


The teacher creates or modifies lessons (activities) using the edit button on the header of the activity page.  
The images are those found in the Journal plus any images in /home/olpc/Documents. In recent builds of Sugar,
This button loads the lesson into an editor (based on tinymce).
this folder is visible in the Journal and acts like a mounted usb drive. This means that images obtained from
the internet, a digital camera or a mobile phone can be copied to a usb drive. When this drive is mounted, it will appear at the bottom of the Journal screen along with an icon for the /home/olpc/Downloads folder. By selecting the usb drive (or SD card) containing the images, the relevant ones can be dragged to the folder. Alternatively, the images can be dragged to the Journal. In either case, a thumbnail will appear on this screen.


The content editor enables the user to create or modify a lesson. The lesson
[[Image:image_2.png]]
is an HTML web page. The editor (tinymce) fenables the content to be edited as
plain text. Some patience is required because the editor is going from plain text to
HTML modes character-by-character.


===Uploading Milestones===
In this case, the middle image in the top row was selected (click on the thumbnail). This screen allows the teacher to specify the size and location of the image. The width of 600 represents one-half of the screen. The height of 450 gives a 4:3 aspect ratio.


The buttons (edit and up arrow) on the right of the header are used in creating lessons. Learn downloads milestones as a single zipped file. Learn also provides for modified milestones to be uploaded to the school server.  
The next entry specifies the screen on which the image will appear. In single-screen lessons this is, of course, 1.
In multi-screen lessons, the teacher might want a different image on each screen.  


If the up arrow is clicked in a milestone (activity ladder), the milestone will be packed and uploaded to the schoolserver. For learn-50, this can also be done using a USB flash drive in lieu of the school server. Mount a flash drive with a folder 'kls' at the root level. Learn will use this folder for uploads and downloads. For example, a milestone could be created with several activities (e.g. in Laboratory) and then uploaded by the up-arrow. The flash drive could be unmounted and moved to another laptop. On that laptop the milestone can be downloaded (click on the milestone which now has a light blue cap).
An entry of 1L specifies that the image should be at the top left of the screen. An entry of 1R specifies the right side. An entry of 1 specifies the image should be centered. When the image is on the left, text will appear to its right. If right is specified, text will appear to the left. When an image is centered, text will begin
below the image.


Note that Learn has only been tested and is only supported on OLPC laptops at present. Learn is best used with a recent build of the software (e.g. 11.2).
The teacher clicks on the OK entry to commit the change.


===Examples===
[[Image:image_3.png]]


The first milestone in Explore/examples has five activities which illustrate the capabilities of basic lessons which can be created by educators with limited computer experience. The examples in the other milestonse require intervention by someone familiar with the Linux and with using the Terminal activity.
This shows the image in the lesson. Since 1L was entered, the image is on the left with text to the right.
Note: images currently can only be located at the top of a screen and only one image can be on each screen.


The first example is straight text. Such an activity is often used at the beginning of a milestone to introduce its topic.
===Adding Audio Clips===


The second example is a text illustrated by an image. In the edit mode, an image may be added using the camera icon. The camera icon shows all of the images in the Documents folder (/home/olpc/Documents). This folder is made visible in the Journal activity of recent builds of the XO software. Images may be created with the Record activity or as sreenshots (ALT+1). It is wise to give each image a meaningful title as it is added to the Journal. Try to make the title with no spaces (e.g. use a hyphen or underscore or period instead. The best choice is the underscore because the hyphen and period may have special uses. Images may also be created using Sugar activities such as Paint. The image may be copied from the Journal to the Documents folder. Images taken with a mobile phone or digital camera may be copied to the Documents folder from a flash drive. It is often useful to make a diagram on paper and then photograph the paper. Make sure the paper is flat and well lit. A picture of a lesson on a blackboard can also be easily added to a Learn activity.
Clipping on the microphone adds an audio clip to the lesson. It works the same way as the image icon
except that the user only needs to click on the correct audio clip since no location or size information is  
needed.  


In the edit mode, there is a camera icon at the top right of the screen. Clicking on this icon shows a screen with thumbnails of the images in the Documents folder. The user selects the correct image for the activity. The user is asked to specify the width and height of the image. The width of the screen is 1200 pixels so a width of 600 will occupy half of the screen. Images are often in a ration of 4:3 so that an image with a width of 600 would have a height of 450. In addition, the user is asked on which screen the image should appear. Finally, the user may specify the image as right or left. An image will appear at the top of the screen to the right or left with text flowing around it. If neither right or left is specified, the image will be centered at the top and the text will begin below the iamge. When the lesson is saved, the Learn activity makes a copy of the image in the activity folder resized to the specification. It adds code which will show the image on the screen. The user clicks on the save icon and then the left arrow to leave the edit mode. The iamge will now be visible in the lesson.
A lesson with an audio clip shows a play button in the left-side of the footer. It is a toggle so that  
when the audio is playing it shows a 'pause' symbol. The audio continues if play is pressed after a pause.
To restart the audio, it is necessary to go back to the activity ladder and select the activity again.


The third example shows a multi-screen lesson. Using scrolling on an XO is awkward at best. It is better to divide a lesson into multiple screens (pages) to prevent the need for scrolling. The Learn activity provides navigation buttons at the bottom of the screen which make it easy for students to move from one screen to the next. The lesson needs to be divided at logical points. This is accomplished by moving the cursor immediately to the left of the first character of the next screen and inserting a 'horizontal rule' using the first tool on the third row of the editor's toolbar.
===Adding Questions===


The fourth example shows a lesson with an image and an audio track. The track can be pre-recorded as in the British Council story or can be recorded by the lesson author. The recording can be made using Record although
An interactive quiz can easily be added to any lesson/activity.
the microphone amplification of the XO is often insufficient. It can also be made by an external microphone using Record or using an external voice recorder. As with an image, the clip is copied from the Journal or an external flash drive to the Documents folder. Clicking on the microphone icon at the top of the edit screen shows all of the audio clips in the Documents folder. The user selects the correct clip for the activity. When the lesson is saved, the Learn activity will add the clip to the lesson.


When a student does the activity, there will be a play button on the bottom right of the screen. When clicked the audio clip will play and a pause button will be shown. When the pause button is clicked, the playback stops and the play button is shown. The playback continues independently of the screen shown. The British Council story, for example, allows the student to read the story advancing to the next page in time with the audio track.
[[Image:quiz_in_editor.png]]


The fifth example shows a lesson which includes a quiz. The quiz is entered in a special format developed by Moodle called 'gift'. In edit mode, the lesson may show special comments framed by '/*' and '*/'. The quiz is entered in this form.  
The quiz is entered in edit mode using a special format developed by Moodle called 'gift'.  


The questions are entered between the following lines:
The questions are entered between the following lines:


/*Quiz
/*Quiz
      questions go here
*/


The word Quiz (capitol Q) must be entered after /* with no spaces.
    questions go here
The '*/' is on a separate line. The questions are entered between these two lines separated by a blank line.
Here are some example questions:


/*Quiz
/*
 
The word Quiz (capitol Q) must be entered after /* with no spaces. The '*/' is on a separate line. The questions are entered between these two lines separated by a blank line. Here are some example questions:
<pre>
/*Quiz  
The Learn activity is part of the Karma Learning System.{T}
The Learn activity is part of the Karma Learning System.{T}


Line 456: Line 474:


One of these organizations is not related to the others. Which one? {=CIA ~OLPC ~Sugarlabs ~Red Hat}
One of these organizations is not related to the others. Which one? {=CIA ~OLPC ~Sugarlabs ~Red Hat}
*/


The first question is True-False. Answers are shown between braces '{ }'. The answer to a True-False question may be any of T, t, True, true, F, f, False, false. Note that, unlike the othere answers, an equal sign '=' is not needed.
*/
</pre>
The first question is True-False. Answers are shown between braces '{ }'. The answer to a True-False question may be any of T, t, True, true, F, f, False, false. Note that, unlike the other answers, an equal sign '=' is not needed.


The second question is short answer. Acceptable answers (one or more) are given between braces. In this case, XO and xo will be accepted as correct. Xo and xO would be considered incorrect.
The second question is short answer. Acceptable answers (one or more) are given between braces. In this case, XO and xo will be accepted as correct. Xo and xO would be considered incorrect.
Line 466: Line 485:
The fourth question is multiple-choice. The choices are given between braces. The correct answer is indicated by the equal sign '='. The incorrect choices (distractors) are indicated by the tilde sign '~'.
The fourth question is multiple-choice. The choices are given between braces. The correct answer is indicated by the equal sign '='. The incorrect choices (distractors) are indicated by the tilde sign '~'.


The quiz is created when the lesson is saved. When the student opens the lesson, there will be a 'Start' button shown on the bottom right of the screen. The screen gives information (e.g. a diagram) needed to answer the questions and/or instructions on answering the questions (e.g. round your answer to two decimal places).
The quiz is created when the lesson is saved.  


When the student presses the Start button, he is given the questions one at a time in the order they appear in the lesson (not randomized).
[[Image:quiz question.png]]


===Using Sugar Activities===
When the student opens the lesson, there will be a 'Start' button shown on the bottom right of the screen. The screen gives information (e.g. a diagram) needed to answer the questions and/or instructions on answering the questions (e.g. round your answer to two decimal places).


A lesson may launch a Sugar activity. This is accomplished by entering a special comment as follows:
When the student presses the Start button, he is given the questions one at a time in the order they appear in the lesson (not randomized).


/*B:ShowNTell,lines.cpxo,application/x-classroompresenter*/
This capability is based on the jquizme library.


The comment must be on a single line (word wrap to more than one line is ok). It must start with /*B: and finish with */. Spaces are not allowed. There are three parameters separated by commas. The first is the name of the activity: ShowNTell. Do not include the word activity. Use Turtleart but not Turtle Art or Turtleart.activity.
===Using Karma Templates===
The second parameter is tha name of a bundle to be associated with the activity at launch. The third parameter is the mime-type of the bundle.


A comment such as /*B:Write*/ would result in a launching the Write activity as a new start.
When creating an activity, the teacher can choose among a menu of activity types from t00 - a basic activity
to t20.


The specified bundles must be in the activity folder. At present there is no automated procedure to create bundles (normally done using the activity itself), nor to copy the bundle to the activity folder. This can be done using the Terminal activity (command line).
[[Image:new_activity_1.png]]


In learn-51, this capability will be extended to 'templates'. A template is a Sugar activity or Karma library animation which can be included in an activity with special content entered as a comment. For example, an activity could launch the Wordsearch activity with a specific wordlist. This might appear as follows:
The activity types are:


/*B:Wordsearch,vocab.txt,text/plain
#t00 Basic - a normal textbook-style lesson with optional images, audio, or quiz components.
head
#t01 Adding up to 10 - a Karma game which currently has no options for customization.
foot
#t02 Crossword - a crossword puzzle to find a hidden word. A teacher can create a custom crossword puzzle.
finger
#t03 Hangman - a traditional hangman. A teacher can provide the wordlist.
chest
$t04 Identification - not currently usable
shoulder
#t05 Mad-libs - A teacher can provide the clues and story.
throat
#t06 Matching - a Karma implementation of Concentration. The teacher can provide the words and images.
leg
#t07 Matching Pairs - a matching activity. The teacher can provide the list of matching words.
*/
#t08 Multiple-choice sentence - multiple choices for words in the sentence (e.g. is/are). The teacher can supply the word choices and sentences.
#t09 Puzzle - rearrange pieces of a picture in alphabetical or numerical order to see the completed picture. The teacher can supply images.
#t10 Quick Arithmetic - student is challenged to provide sums mentally. Currently customizing is not supported.
#t11 Scrambled sentences - not operational
#t14 Vocabulary - not operational
#t15 Vocabulary with game - not operational
#t16 What is this? - matching images against words. The teacher can supply words and images (images not automated).
#t17 Anagram - rearrange letters to form a word naming an image. Teacher can supply words and images (images not automated).
#t18 Maths introduction - not operational
#t19 Maths guided practice - not operational
#t20 Maths evaluation - not operational


Notice that the entry is the same as that for launching a Sugar activity except that word list is entered between the /* and the */ which are now on separate lines. The first line must have the parameters. The wordlist starts on the next line. The '*/' must be on a line by itself.
The best way to see how these activity types work is to go to the Laboratory and in any course add a milestone.
Then add activities selecting the various types. The result is an example of the activity type. By entering
the editmode, the source.txt file defining that activity is shown. It can be edited to make a custom version
that fits the milestone. For example, a crossword could be constructed using some words from the week's vocabulary list.


In learn-51 it will therefore be possible to use Sugar activities or templates without the need for using the Terminal activity (command-line).
Most of these templates were created by Peter Gijsels in a visit to Rwanda in 2011. They illustrate how
activities can be created using the Karma library and html5 web techniques (css, javascript, jquery). It is intended that this library be expanded to include more useful educational activity types.


==TinyMCE==
===Using Sugar Activities===


The editor (TinyMCE) provides an edit toolbar:
There is currently no automated support for creating these lessons. It requires some command-line knowledge.
When a lesson is opened in the edit mode, the file being edited is 'source.txt'. The first line of this file
contains a directive to launch a specific Sugar activity, e.g.,


[[Image:tinymce_toolbar.png]]
<!--B:TurtleArt,lines_lesson.ta,application/x-turtle-art-->


The tool bar has three rows of tools divided into groups by a vertical bar '|'
For technical reasons, this line appears in the edit mode as:
The first group in the top row selects the font family: bold, italic, underline, .
The next group aligns the text: left, center, right, full (aligned both left and right).
The third group has two lists. The first lists the css classes defined in the global stylesheet.
It is not very useful in the editor. However, the second lists predefined text styles such as  
'paragraph' - the default for body text and several forms for headings. Heading 1 is appropriate for a screen or activity title, heading 2 for subtitles.


In the second row, the first group selects a bulleted list (unordered) or a numbered list (ordered). The next group selects an outdent (move line left) and indent (move line right).
/*B:TurtleArt,lines_lesson.ta,application/x-turtle-art*/
The next group selects undo (roll back the previous edit) or redo (undo the undo).


The last group in the second row has seven tools. These are not currently useful with the content editor.
The source.txt file uses html5 markup in which <!-- and --> enclose a comment. As a result, this line is
not visible in the editor. By converting the markup to /* */, the user can create and edit this line.


In the first group of the third row, the first tool inserts a horizontal rule. This is used in Learn to identify a screen boundary. In the second group, the first tool selects a superscript mode. The second sets a subscript mode. The tool in the third group allows the insertion of a special character from a table of special characters.
The B: is required to signal this comment contains a directive. There are three parts to the directive separated by commas:


===Special Formats===
#name of the Sugar activity. This is the same as the name in /home/olpc/Activities minus the activity.
So Turtle Art (Blocks) appears as /home/olpc/Activities/TurtleArt.activity.
#file name of the activity bundle (lines_lesson.ta) including the file extension. This bundle must be in
the folder for this lesson in Learn.
#mime_type of the bundle. The mime_type of a bundle is given in /home/olpc/Activities/TurtleArt.activity/activity/activity.info. For 'some.activity', look in /home/olpc/Activities/some.activity/activity/activity.info.


Sometimes lessons need special formatting. This is provided in edit mode by the + icon. In learn-50 there are three special formats: normal (table), Placetable, and Problems.
A Sugar activity can be launched as a new start by:


The user obtains HTML formatting for a table by entering the number of columns and rows. The user can also specify a row of headers and provide the header titles.  
/*B:some.activity*/


The Placetable is a special form of table used in Mathematics lessons. In this case the columns headers give the column place value. The Placetable can be for whole numbers or up to three decimal places (0 decimal places for whole numbers).
The Learn.activity creates a Journal object with the bundle file as data. It then resumes the activity from this Journal object.


The third option is to format arithmetic problems in column form. The user specifies the number of problems in that row (1-10). The problem is filled with the digit 9 so that the user can edit it to the needed values. Learn generates the problem with a monospace font so that the digits are aligned by place value.
Note that not all activities are able to resume from a Journal object and not all activities support processing data files.  


The user needs to quit the launched activity when finished to return to the Learn activity. Sugar treats the launched activity as a window opened by Learn and so gets confused if the user tries to return to Learn via the frame.


==Integration in the Karma Learning System==
==Integration in the Karma Learning System==
Retrieved from "https://wiki.sugarlabs.org/go/Activities/Learn"