Difference between revisions of "TOER wiki help"

From Open Educational Resources
Jump to navigation Jump to search
 
(44 intermediate revisions by 3 users not shown)
Line 1: Line 1:
=Help on editing TOER=
+
==Login to TOER==
To edit a page using the visual editor, click on the "Edit" tab at the top of the page.It can take a few seconds for the page to open for editing, and longer if the page is very long.
+
You can login to TOER with your TOER id and password to edit or do any changes to pages.  If you have the TOER login ID password, then click on the '''login''' on top left side and give the login ID and password to login.
 +
 
 +
== Creating pages ==
 +
For creating new page in TOER website: Go to to browser address bar and after "<nowiki>https://teacher-network.in/OER/index.php/</nowiki>" type your new page name and press Enter.  After this if the page does not exist in this website, it will show you like '''''There is currently no text in this page. You can search for this page title in other pages, search the related logs, or create this page.'''''
 +
 
 +
Now click on "'''create'''" from top right side of the your screen, now you can start editing your new page by using Visual editor. After you done with your editing, click on the save page button, add your summary of the changes done and click on '''"Save page"'''.
 +
 
 +
The url of your page will be : <nowiki>https://teacher-network.in/OER/index.php/page_name</nowiki>.
 +
 
 +
'''NOTE:- Rules for naming pages'''
 +
# Page name must be unique-  reflection_of_light  (you can give space, wiki put _ automatically)
 +
# Page name should be short
 +
# Page name should be fully explanatory (no short forms)
 +
# Use sentence case. Don’t use upper case
 +
To edit an existing page using the visual editor, click on the "Edit" tab at the top of the page. It can take a few seconds for the page to open for editing, and longer if the page is very long.
  
 
Clicking on the "Edit source" tab will open the classic wikitext source editor.
 
Clicking on the "Edit source" tab will open the classic wikitext source editor.
Line 7: Line 21:
  
 
==Basic editing==
 
==Basic editing==
 +
To edit a page, use the "Edit" tab at the top of the page.  It will open the visual editor; this can take upto a minute depending on page size and internet speed.
 +
The visual editor tool bar looks like this:
 +
[[File:1._VisualEditor_toolbar-en-_for_TROER.png|frameless|841x841px]]
 
===Entering Text===
 
===Entering Text===
Just type in text
+
Just type in text or copy paste from your existing text file (.doc or .odt) into the wiki page
or
+
 
copy paste from your existing text file (.doc or .odt) into the wiki page
+
=== Formatting text ===
 +
[[File:1._VisualEditor_toolbar-en-_for_TROER.png|frameless|841x841px]]
  
 +
Use the toolbar to do the basic text formatting like bold, italic and underline etc.Once you click on the "A" icon from the toolbar, you will get all the formatting styles.
 +
# '''Bold :''' Select the text, click on the '''"A"''' icon from the visual editor tool bar and select '''bold'''.
 +
# '''Italic :''' Select the text, click on the '''"A"''' icon from the visual editor tool bar and select ''Italic''.
 +
# '''Underline :''' Select the text, click on the '''"A"''' icon from the visual editor tool bar and select Underline.
  
 
===Headings===
 
===Headings===
 +
Headings pull-down menu allows you to change how the paragraph is formatted. To change the style of a paragraph, put your cursor in the paragraph and select an item in this menu (you don't have to highlight any text). Section titles are formatted "Heading", and subsections are "Heading 2", "Heading 3", and so on. The normal format for text is "Paragraph".[[File:2._VisualEditor_Toolbar_Headings-en.png|center|frame]]
  
'''Headings''' pull-down menu: allows you to change how the paragraph is formatted. To change the style of a paragraph, put your cursor in the paragraph and select an item in this menu (you don't have to highlight any text). Section titles are formatted "Heading", and subsections are "Heading 2", "Heading 3", and so on. The normal format for text is "Paragraph".
+
=== Creating numbered and bulleted lists ===
 +
If you want to start your text by putting number or bulletin, click on the Numbering and bulleting icon(appears like three small line), and select required option.
  
===External Web link===
+
Numbering looks like below :-
When you want to link a page from outside the TOER website, (external link)<br>
+
# Kannada
Syntax is as follows: Open Square Bracket,followed by the URL/web page address,followed by a space and then the description of the link.
+
# English
 +
# Hindi
 +
Adding bullets will format like below :-
 +
* Kannada
 +
* English
 +
* Hindi
  
eg
+
=== Special character ===
<nowiki>[http://en.wikipedia.org/wiki/Nth_root Wikipedia Page for Surds]</nowiki>
+
If you want to add any extra characters like symbols etc. click on the character icon  from the visual editor toolar and select the characters from the list.
will read as
 
[http://en.wikipedia.org/wiki/Nth_root Wikipedia Page for Surds]
 
<br>''http://en.wikipedia.org/wiki/Nth_root'' - is the web link
 
<br>''Wikipedia Page for Surds'' - name of the link
 
  
===Internal Web link===
+
=== Inserting Table ===
When you want to link a page from within the TOER website (internal link)
+
1. You can insert Table in TROER by using "Insert" >> "table" option from the top tool bar.  (Also you can even import a table by dragging a comma-separated value (.csv) file from your computer into the main editing window).  
Syntax is as follows<br>
 
open DOUBLE Square Bracket,followed by the TOER page name (without http etc) ,followed by pipe and then the description of the link
 
eg
 
<nowiki>[[Surds | TOER Surds page]]</nowiki>
 
will read as
 
[[Surds | TOER Surds page]]
 
<br>Surds is the name of the TOER page - http://teacher-network.in/OER/index.php/Surds
 
<br>TOER Surds page is the name of the link
 
  
==Advanced Editing==
+
2. When you click on "Table", in the "Insert" menu, the visual editor inserts a blank four-by-four table.  
In TOER, we upload text and mind maps, other resources are uploaded elsewhere and then linked/embedded on the TOER using widgets-
 
#Geogebra files - [http://geogebratube.org Geogebratube]
 
#Photos - slide show in [http://picasaweb.google.com Google Picassa]
 
#Presentations - slide show in [http://slideshare.net Slideshare]
 
#Videos - [http://Youtube.com Youtube] or [http://vimeo.com Vimeo]
 
#Podcasts (audio files) - [http://yourlisten.com Yourlisten]
 
  
===Coloring Text===
+
[[File:VisualEditor insert table.png|frameless|221x221px]] [[File:VisualEditor empty table.png|frameless|216x216px]]
Below syntax can be used to color text. For the HTML web color names, please refer [https://en.wikipedia.org/wiki/Web_colors#HTML_color_names this page].
 
{| class="wikitable"
 
!Markup
 
!Renders as
 
|-
 
  | <code><nowiki>{{ font color | green | green text }}</nowiki></code>
 
| {{font color | green | green text }}
 
|-
 
| <code><nowiki>{{ font color | blue | do not style text as a link }}</nowiki></code>
 
| {{font color | blue | do not style text as a link }}
 
|-
 
| <code><nowiki>{{ font color | white | black | white with black background }}</nowiki></code>
 
| {{font color | white | black | white with black background }}
 
|-
 
|  | <code>{<nowiki/>{ font color'''{{big | {{! }}<nowiki/>{{! }} }}'''<nowiki>yellow | default text in yellow background }}</nowiki></code>
 
| {{font color |  | yellow | default text in yellow background }}
 
|-
 
|  | <code>{<nowiki/>{ font color'''{{big | {{! }} }}'''<nowiki>bg=yellow | text = default text in yellow background }}</nowiki></code>
 
| {{font color | bg=yellow | text = default text in yellow background }}
 
|}
 
  
===Inserting image ===
+
3. Now the "Table" menu is available. From that menu, you can add a caption to the top of the table.  
====Link wikimedia commons images in to our TOER====
+
[[File:Editing a table using VisualEditor, small.gif|thumb]]
You can insert wikimedia commons images on TOER in two ways, with external image link or with Filename. Inserting image with latter method ensures that images show up on PDF versions of wiki pages instead of references with former method.
+
4. To select any cell, just click in the cell once.
First open the web page with the image (picture).
 
===== Filename =====
 
# Click on Use this file with wikipedia symbol and copy the syntax
 
# Paste the syntax on the page you wish to add image
 
<nowiki>[[File:Example.jpg|thumb|Example]]</nowiki>
 
  
will be seen as
+
5. To edit the contents of the cell (for example, to add content or to correct a spelling error), double click in the cell. Or you can select the cell and then press Enter key from your keyboard.
  
[[File:Example.jpg|thumb|Example]]
+
6. To end your editing of a cell, just click elsewhere outside the table
  
As mentioned before, inserting image this way ensures that images show up on PDF versions of wiki pages instead of references with external links with second method.
+
7. You can add or delete a column or a row by clicking on the side arrow marks.  
  
===== External image link =====
+
===External Web link===
# Right click on the image and select 'copy image URL'
+
[[File:VisualEditor - Toolbar - Linking.png|left|100x100px|frameless]]
# Then go to your TOER page, type <nowiki>{{ext-img|size|imageurl}}</nowiki>. For ex.,. <nowiki>{{ext-img|150px|https://upload.wikimedia.org/wikipedia/mediawiki/a/a9/Example.jpg}}</nowiki> if url is <nowiki>https://upload.wikimedia.org/wikipedia/mediawiki/a/a9/Example.jpg</nowiki> and you wish to give 150px size.
+
[[File:4. VisualEditor-link tool-external link.png|thumb|396x396px]]When you want to link a page from outside the TOER website, (external link)
  
 +
Click on the "Link" icon (links in a chain) in the toolbar.
  
Source of images - https://search.creativecommons.org/
+
If you select (highlight) text and then press the "Link" button, that text will be used in creating the link. For a link that involves just one word, you can either select that word or just put the cursor within that word.
  
====Upload our own images in TOER and link into our TOER page====
+
Once you have entered or selected the link, you complete the linking process by pressing <kbd>↵ Enter</kbd> or by pressing the "Done" button. Your link will immediately appear on the page, but as with other changes to the page, it will not be saved until you save the entire page.
1 On the left hand side in the navigation sidebar, click the "Upload File" link.
 
2 On the Upload file page, browse for the image you want to upload to your TOER page.
 
3 The file will show in the File history and the file name will display in the page.
 
  
On the image page to the top left, you can see the file name. in this case File:Dog4.gif.
+
===Internal Web link===
 +
[[File:5. Internal Link TROER.png|thumb|300x300px]]
 +
When you want to link a page from within the TOER website (internal link).
 +
Select the word which you are going to give another TROER page link then click on the "Link" icon(Links in a chain) in the tool bar, and enter the page name (within TROER page). It will show you the list of the pages are already in the TROER. Select the link which you want to insert here and press "Done".
  
Click Upload File.
+
=== Inserting math Formula ===
Note: Please note down the file name
+
If you want to type any Maths formulas , click on insert -> more -> formula and from the the formula window select formula and replace the default value and do change as requires and finally click on Insert.<br>
Your file is uploaded to TOER website and now we have use this image file in our any TOER page.
 
  
1. Click the Embedded file icon in the WYSIWYG editor. A code will be generated like the following:
+
== Uploading and Inserting Files ==
  
<nowiki>[[File:Example.jpg|image size in px]] </nowiki>
+
=== Upload File ===
 +
If you want to upload any file (text file, .mm, images, audio, videos- only .ogv format and .pdf) into the TROER, You just click [[Special:Upload|here]] for uploading file(or from side panel, goto "Tools">>"Upload file".
  
2. Change "Example.jpg" name into your file name which you noted when uploading.
+
[[File:1. Upload files.png|frameless|900x900px]]1. Click on the browse and browse your file from the computer(your file size should not be more than Maximum file size).  
3. If you want to re-size the image file, replace 400px into your required size(The default maximum size depends on the format and the internal image dimensions (according to its media type).
 
3. Click on the "Save the page".
 
  
Now you will see your image show on the wiki page.
+
2. After your file selected, you have to fill the required details under "File description" for completing the upload file process.
  
Also all [http://commons.wikimedia.org Wikimedia Commons] images can be directly used in this wiki with normal image syntax as described above -
+
[[File:2. Upload files.png|frameless|800x800px]]
  
<nowiki>[[File:Example.jpg|thumb]] </nowiki> [[File:Example.jpg|thumb]]
+
[[File:3. Upload files.png|frameless|800x800px]]
  
===Resizing the image after inserting===
+
3. After entering all the above details, finally click on the '''"Upload file"''' .
  
===Inserting Table===
+
===Inserting image ===
You can insert Table in TOER by using this below syntax
+
This refers to inserting uploaded files into your current page
  
1. Basic table with Information
+
1. To add your uploaded image (or another type of media file) to the page which you already uploaded, click the "Media" icon (a picture of mountains) in the "Insert" menu.
Syntax in TOER is:<br>
 
<pre>
 
{| class="wikitable" border="1"
 
|-
 
! header 1
 
! header 2
 
! header 3
 
|-
 
| row 1, cell 1
 
| row 1, cell 2
 
| row 1, cell 3
 
|-
 
| row 2, cell 1
 
| row 2, cell 2
 
| row 2, cell 3
 
|}
 
  
</pre>
+
[[File:VisualEditor_Media_Insert_Menu-en.png|200px]]
Will be seen as
 
{| class="wikitable" border="1"
 
|-
 
! header 1
 
! header 2
 
! header 3
 
|-
 
| row 1, cell 1
 
| row 1, cell 2
 
| row 1, cell 3
 
|-
 
| row 2, cell 1
 
| row 2, cell 2
 
| row 2, cell 3
 
|}
 
  
2. Inserting image within the table
+
2. Clicking the "Media" icon opens a dialog that open search box, just type your uploaded file name and it will start searching from TROER for media files related to the title of the page you're searching.
And If you want to insert image within the table see the below syntax
 
<pre>
 
  
{|class="wikitable"
+
3. After the image you selected is inserted into the page, another dialog will open. This dialog allows you to add and edit the caption of the image. The captions.  
|-
 
|Prophase 1
 
|[[File:Prophase 1.gif|400px]]
 
|}
 
  
</pre>
+
4. You can also set various parameters for the files in the "Advanced settings" window (for mind map, select frame less and click in '''insert'''). These include the alignment, the type, and size of the image.
  
Will be seen as
+
5. When you're done, click "'''Insert'''" to close the dialog and return to editing the page.
{| class="wikitable"
 
|-
 
|Prophase 1
 
|[[File:Prophase 1.gif|400px]]
 
|}
 
  
3. Inserting header for each table.
+
The image will be added wherever your cursor is.
  
Syntax :-
+
==Advanced Editing==
<pre>
+
In TOER, we upload text and mind maps, other resources are uploaded elsewhere and then linked/embedded on the TOER using widgets and other methods -
{| class="wikitable" border="1"
+
#Geogebra files - [http://geogebratube.org Geogebratube]
|+ '''Table Heading'''
+
#Presentations - slide show in [http://slideshare.net Slideshare]
! header 1
+
#Videos - [http://Youtube.com Youtube] or [http://vimeo.com Vimeo]
! header 2
+
#Podcasts (audio files) - [http://yourlisten.com Yourlisten] or [https://soundcloud.com/ Soundcloud]<code><nowiki/></code><code><nowiki/></code>
! header 3
+
#Gallery - adding photos as a gallery which is used for showing two or more images.
|-
+
Most of these resources except Gallery are from external repositories.
| row 1, cell 1
 
| row 1, cell 2
 
| row 1, cell 3
 
|-
 
| row 2, cell 1
 
| row 2, cell 2
 
| row 2, cell 3
 
|}
 
 
 
</pre>
 
 
 
Will be see like :
 
{| class="wikitable" border="1"
 
|+ '''Table Heading'''
 
! header 1
 
! header 2
 
! header 3
 
|-
 
| row 1, cell 1
 
| row 1, cell 2
 
| row 1, cell 3
 
|-
 
| row 2, cell 1
 
| row 2, cell 2
 
| row 2, cell 3
 
|}
 
 
 
If you want to try different format tabling like merge table and for change width/hight of the table, go through [https://en.wikipedia.org/wiki/Help:Table table wiki help].
 
 
 
===Inserting image slide show===
 
You can embed a Picassa (Google photos) image slide show in TOER
 
Using your gmail id, create a photo album on picassa (http://picasaweb.google.com). To learn how to upload photos on picasa, click [http://karnatakaeducation.org.in/TOER/en/index.php/Hand_out_for_uploading_photos_Picasa.odt here]
 
 
<nowiki>{{#widget:Picasa
 
|user=<put your gmail id which with you have created the album itfc.education@gmail.com>
 
|album=<write your picasa album id here>
 
|width=300
 
|height=200
 
|captions=1
 
|autoplay=1
 
|interval=5
 
}}
 
</nowiki>
 
 
 
example
 
{{#widget:Picasa |user=itfc.education@gmail.com |album=6118651689721087041 |width=300 |height=200 |captions=1 |autoplay=1 |interval=5 }}
 
{{#widget:Picasa |user=itfc.education.india@gmail.com |album=6122588724572196705 |width=300 |height=200 |captions=1 |autoplay=1 |interval=5 }}
 
 
 
You can also insert a single image from picassa to the wiki. Click on the image on picasa, copy paste the url of the photo to wiki.
 
 
 
'''Please note that this depends on [https://get.adobe.com/flashplayer/ adobe flash] and may not work on all modern web browsers.'''
 
  
 
===Inserting video===
 
===Inserting video===
Youtube video can be embedded in TOER
+
To embed any youtube videos to your current page,
Video on Surds from Youtube
+
# Select "'''Template'''" option from the "Insert" menu.
 
+
# Type youtube in the template search box and select '''YouTube''' from the list,
Syntax is:
+
# In the next window it will ask you to enter your '''youtube video ID'''.
 
+
# For finding your YouTube video ID.Look at the URL of youtube video, and at the end of it, you should see a combination of numbers and letters after an equal sign (=).  Example: <nowiki>https://www.youtube.com/watch?v=PTaL1s3YJPY</nowiki> in this youtube link "'''PTaL1s3YJPY'''" is the video ID.
<nowiki>{{#widget:YouTube|id=iTt3TVjsjuY}}</nowiki>
+
# Like above you need to enter your video ID in the video ID box and click on '''INSERT''', finally save your page to see the youtube video in your page.{{#widget:YouTube|id=iTt3TVjsjuY}}
 
 
will be seen as
 
 
 
{{#widget:YouTube|id=iTt3TVjsjuY}}
 
 
 
 
 
If you want to make the video appear as thumbnail, then syntax is:
 
<nowiki>{{#ev:youtube| o3gN9wI_w64| 150| left}}</nowiki>
 
 
 
{{#ev:youtube| o3gN9wI_w64| 150| left}}
 
  
 
===Inserting mindmap===
 
===Inserting mindmap===
# Click on Upload a new file at left side or [[Special:Upload|click here]]
+
# Click on Insert -> Media
# Click on Browse and select you mindmap file to upload.
+
# Type the exact name of your mindmap file. For eg., '''File:Mymindmap.mm'''
# Modify file name and Add description if needed.
+
# Select the mindmap and click on Use this image.
# Click on upload file to finish the upload.
+
# Go to advanced settings and uncheck wrap text under position. Select flameless and click on full size.
Now follow this below steps to embed the uploaded mm file into your TOER page
+
Alternatively, on the source editor it can be inserted through this <nowiki>[[File:Mymindmap.mm]]</nowiki>.
Syntax is:
 
<nowiki>[[File:Student_ICT_curriculum.mm]]</nowiki> and the file will be like below
 
  
 
[[File:Student_ICT_curriculum.mm]]
 
[[File:Student_ICT_curriculum.mm]]
  
 
===Inserting slides===
 
===Inserting slides===
#You can insert slides from a ODP, PDF, PPT files using slideshare.
+
# You can insert slides from a ODP, PDF, PPT files using slideshare.
#Create an id for yourself  on http://slideshare.net  (this is very easy, like creating any id for any web service)
+
# Create an id for yourself  on http://slideshare.net  (this is very easy, like creating any id for any web service)
#Upload your file on http://slideshare.net
+
# Upload your file on http://slideshare.net
#Click on share file and select the 'embed code'
+
# Click on share file and select the 'embed code' then you will get a link like:- {{#widget:Iframe |url=<nowiki>http://www.slideshare.net/slideshow/embed_code/</nowiki>'''48241562'''<nowiki> |width=450 |height=360 |border=1 }}</nowiki>
#From the embed code,pick out a number string
+
# In above link "'''48241562"''' this is the 8 digit wordpress code.
 
+
# Copy the 8 digit word press code
Syntax in TOER is:
+
# Click on <nowiki>'''</nowiki>Insert<nowiki>'''</nowiki> >> <nowiki>'''</nowiki>Template<nowiki>'''</nowiki> >> in the search box search " slide share" and select the slide share template and  click on <nowiki>'''</nowiki>"Add Template"<nowiki>'''</nowiki>.
 
+
# It will ask your your slide share 8 digit express code, just paste your copied 8 digit wordpress code.
<nowiki>slideshare, please use wordpress 8 digit code as in this e.g. - {{#widget:Iframe |url=http://www.slideshare.net/slideshow/embed_code/48241562 |width=450 |height=360 |border=1 }} </nowiki>
+
# Finally click on <nowiki>'''"Insert"'''</nowiki>.
 
+
# For see the embeded slide file, click on the <nowiki>'''"save page"'''</nowiki>. it will looks like below
<nowiki> instead of {{#widget:Iframe |url=http://slideshare.net/slideshow/embed_code/MDPAyvmMvPtOgZ" |width=450 |height=360 |border=1 }}
 
</nowiki>
 
 
 
<nowiki>{{#widget:Iframe
 
|url=http://www.slideshare.net/slideshow/embed_code/29378973
 
|width=450
 
|height=360
 
|border=1
 
}}</nowiki>
 
 
 
  
 
{{#widget:Iframe
 
{{#widget:Iframe
Line 294: Line 164:
 
|border=1
 
|border=1
 
}}
 
}}
 
where 29378973 is the number string.
 
  
 
===Inserting audio podcast===
 
===Inserting audio podcast===
Line 303: Line 171:
 
#The final audio clip can be uploaded on http://yourlisten.com and the link provided on TOER
 
#The final audio clip can be uploaded on http://yourlisten.com and the link provided on TOER
  
==Math Formula==
+
=== Inserting Geogebra file ===
http://karnatakaeducation.org.in/KOER/en/index.php/Math_Formula_on_Wiki
+
'''Steps in uploading a Geogebra file to Geogebra tube'''
 +
# Create a Geogebratube ID; you must login to upload material
 +
# On the toolbar, click on Upload Material
 +
# Choose File (browse for files on your computer) and then click upload
 +
# It will display a progress bar for upload
 +
# Provide explanations as necessary for students
 +
# You should add any questions you want to ask in worksheet for students
 +
# Click on “Continue Uploading”
 +
# It will display a progress bar for upload
 +
# Enter Title of file
 +
# Enter other information for other teachers
 +
# Choose language, target Age
 +
# Definitely add tags to help search for file better - eg., chord, tangent, multiplication, etc
 +
# Save the file
 +
'''Steps in embedding a Geogebra file in TROER'''
 +
# Open the ggb file in Geogebra materials site
 +
# Click on Share -> Mediawiki.
 +
# Copy the id and paste it in Insert->Template->Geogebra->id and click on Insert and save to see the geogebra file on TROER.
  
==Uploading a Geogebra file on Geogebratube and embedding in TOER==
+
===Inserting Gallery===
 +
When more two or more images needs to shown in a wikipage, it is recommended to use Gallery feature in a wiki. This can be using <nowiki><gallery></nowiki> tag in the source editor. Please follow below steps to do that -
 +
# Click on Edit source of the page or section where the gallery needs to be inserted.
 +
# Insert the Filenames the images you want withing the <nowiki><gallery></nowiki> as shown below:
 +
<source lang="xml">
 +
<gallery mode=packed heights=200px>
 +
File:Detroit Publishing Co. - A Yeoman of the Guard (N.B. actually a Yeoman Warder), full restoration.jpg|A Yeoman Warder, from a Victorian-era [[photochrom]]
 +
File:Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
 +
File:Thurston, the famous magician - East Indian Rope Trick.jpg|[[Howard Thurston]] performing the [[Indian rope trick]]
 +
File:Joseph Ferdinand Keppler - The Pirate Publisher - Puck Magazine - Restoration by Adam Cuerden.jpg|"The Pirate Publisher", a satire of copyright infringement from the magazine [[Puck (magazine)|Puck]].
 +
</gallery>
 +
</source>
  
===Steps in embdedding your own Geogebra file in TOER through Mediawiki export===
+
Above syntax will return the gallery as shown below:
#Open the ggb file in Geogebra
+
<gallery mode="packed" heights="200px">
#Click on File -> Export As -> Dynamic Worksheet as webpage.
+
File:Detroit Publishing Co. - A Yeoman of the Guard (N.B. actually a Yeoman Warder), full restoration.jpg|A Yeoman Warder, from a Victorian-era photochrom
#Select Advanced and from drop down menu, select Clipboard: Mediawiki
+
File:Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
#This will make the code required for embedding on wiki to be copied and paste the same on the wiki page where you need it to get it as shown below:
+
File:Thurston, the famous magician - East Indian Rope Trick.jpg|Howard Thurston performing the Indian rope trick
 +
File:Joseph Ferdinand Keppler - The Pirate Publisher - Puck Magazine - Restoration by Adam Cuerden.jpg|"The Pirate Publisher", a satire of copyright infringement from the magazine Puck (magazine).
 +
</gallery>
  
<span> </span>
+
To left-align the captions, specify the CSS declaration <code>text-align:left</code> in the <code>style=</code> attribute:
  
<span></span><div id="ggbContainer6a650c91f2ffdff69475a69d87f54f6a"></div><span></span>
+
<source lang="xml">
 +
<gallery mode=packed heights=150px style="text-align:left">
 +
File:Detroit Publishing Co. - A Yeoman of the Guard (N.B. actually a Yeoman Warder), full restoration.jpg|A Yeoman Warder, from a Victorian-era photochrom
 +
File:Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
 +
File:Joseph Ferdinand Keppler - The Pirate Publisher - Puck Magazine - Restoration by Adam Cuerden.jpg|"The Pirate Publisher", a satire of copyright infringement from the magazine Puck (magazine).
 +
</gallery>
 +
</source>
  
 +
gives:
  
 +
<gallery mode="packed" heights="150px" style="text-align:left">
 +
File:Detroit Publishing Co. - A Yeoman of the Guard (N.B. actually a Yeoman Warder), full restoration.jpg|A Yeoman Warder, from a Victorian-era photochrom
 +
File:Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
 +
File:Joseph Ferdinand Keppler - The Pirate Publisher - Puck Magazine - Restoration by Adam Cuerden.jpg|"The Pirate Publisher", a satire of copyright infringement from the magazine Puck (magazine).
 +
</gallery>
  
===Steps in embedding a Geogebra file in TOER===
 
#Open the ggb file in Geogebra
 
#Click on File -> Export As -> Dynamic Worksheet as webpage.
 
#Provide Title, Text below and above the constructions and then Click on upload.
 
#Get the URL after the upload and use it in ''iframe'' widget as shown below:
 
<nowiki>{{#widget:Iframe
 
|url=https://www.geogebra.org/material/iframe/id/hestdNWy/width/1355/height/636/border/888888
 
|width=600
 
|height=400
 
|border=1
 
}}</nowiki>
 
  
{{#widget:Iframe
+
Captions for the gallery can also be added with <code>caption</code> inside the <nowiki> <gallery> </nowiki> tag:
|url=https://www.geogebra.org/material/iframe/id/hestdNWy/width/1355/height/636/border/888888
+
 
|width=600
+
<source lang="xml">
|height=400
+
<gallery caption="Sample gallery" widths="180px" heights="120px" >
|border=1
+
File:Example.png
}}
+
File:Example.png|Captioned
 +
File:Example.png|Captioned with alt text|alt=The Wikipedia logo
 +
File:Example.png|[[TOER wiki help|Links]] can be put in captions.
 +
File:Example.png|Full MediaWiki <br/>syntax may now be used...
 +
</gallery>
 +
</source>
 +
 
 +
Which produces:
 +
 
 +
<gallery caption="Sample gallery" widths="180px" heights="120px">
 +
File:Example.png|Captioned
 +
File:Example.png|Captioned with alt text|alt=The Wikipedia logo
 +
File:Example.png|[[TOER wiki help|Links]] can be put in captions.
 +
File:Example.png|Full MediaWiki <br/> syntax may now be used...
 +
</gallery>
 +
 
 +
Complete reference for all the available modes and options can be seen here - https://en.wikipedia.org/wiki/Help:Gallery_tag
  
===Steps in uploading a Geogebra file to Geogebra tube===
+
==Working with Images==
#Create a Geogebratube ID; you must login to upload material
+
* Captioning image
#On the toolbar, click on Upload Material
+
* Captioning gallery, size depending on number of images
#Choose File (browse for files on your computer) and then click upload
+
* Use visual editor to do it in steps and make template for gallery
#It will display a progress bar for upload
 
#Provide explanations as necessary for students
 
#You should add any questions you want to ask in worksheet for students
 
#Click on “Continue Uploading”
 
#It will display a progress bar for upload
 
#Enter Title of file
 
#Enter other information for other teachers
 
#Choose language, target Age
 
#Definitely add tags to help search for file better - eg., chord, tangent, multiplication, etc
 
#You can determine whether the file should be publicly available
 
#Save the file
 
  
 +
[[File:Save Window.png|thumb|This is single image with wrapping]]
 +
For all [[Explore an application|explore an application pages]], please follow below methods when you insert image(s) to the pages depending on different cases as described below.
 +
# '''Single image with wrapping:''' When the image is very small and there is enough text around it you can insert image as thumbnail to the left side of the page with this syntax.<nowiki>[[File:Save Window.png|thumb|This is single image with wrapping]]</nowiki> Please add <nowiki>{{clear}}</nowiki> at the end of the sentence where you want it to end.
 +
{{clear}}
 +
# '''Single image with no wrap:''' When the image width is too wide like [[:File:LO Writer 4 Menu Bar.png|this one]], entire page width can be occupied and this syntax can do it: <nowiki>[[File:LO Writer 4 Menu Bar.png|1000px]]</nowiki> [[File:LO Writer 4 Menu Bar.png|1000px]]
 +
# '''Single image with border less table:''' When the image needs to carry big description along with it, then a border less table can be used to show it with this syntax.
 +
{|
 +
|-
 +
|Most of the formatting options available in LibreOffice Writer are available in Calc also. Making the text bold, italicised, increasing/reducing font size, font color etc are all available. Data can also be formatted based on its nature – numeric information can be assigned “,” separators. || [[File:LO Calc 1 viewing a spreadsheet.png|450px]]
 +
|}
 +
:4. '''Two or more images:''' For two or more images, Gallery can be used to with appropriate <code>heights</code> in <code>packed</code> mode and align left with <code>text-align:left</code> in the <code>style=</code> attribute as shown in above [[TOER wiki help#Inserting Gallery|Inserting Gallery]] section. Write the description of the images outside the gallery.<span></span><span></span>
 
=Creating pages and adding template=
 
=Creating pages and adding template=
 
===New page===
 
===New page===
Line 438: Line 353:
 
Make a visible link to the print version from the book's cover or table of contents. You can simply insert the {{tl|print version}} template in the page ''Book'' if the page of the printed version is ''Book/Print version'' to create a box like the one shown.  
 
Make a visible link to the print version from the book's cover or table of contents. You can simply insert the {{tl|print version}} template in the page ''Book'' if the page of the printed version is ''Book/Print version'' to create a box like the one shown.  
  
[[Category:Content]]
+
[[Category:ICT literacy]]
 +
[[Category:Help]]

Latest revision as of 07:07, 8 May 2018

Login to TOER

You can login to TOER with your TOER id and password to edit or do any changes to pages. If you have the TOER login ID password, then click on the login on top left side and give the login ID and password to login.

Creating pages

For creating new page in TOER website: Go to to browser address bar and after "https://teacher-network.in/OER/index.php/" type your new page name and press Enter. After this if the page does not exist in this website, it will show you like There is currently no text in this page. You can search for this page title in other pages, search the related logs, or create this page.

Now click on "create" from top right side of the your screen, now you can start editing your new page by using Visual editor. After you done with your editing, click on the save page button, add your summary of the changes done and click on "Save page".

The url of your page will be : https://teacher-network.in/OER/index.php/page_name.

NOTE:- Rules for naming pages

  1. Page name must be unique- reflection_of_light (you can give space, wiki put _ automatically)
  2. Page name should be short
  3. Page name should be fully explanatory (no short forms)
  4. Use sentence case. Don’t use upper case

To edit an existing page using the visual editor, click on the "Edit" tab at the top of the page. It can take a few seconds for the page to open for editing, and longer if the page is very long.

Clicking on the "Edit source" tab will open the classic wikitext source editor.

You can also open the visual editor by clicking on the "edit" link on each section.

Basic editing

To edit a page, use the "Edit" tab at the top of the page. It will open the visual editor; this can take upto a minute depending on page size and internet speed. The visual editor tool bar looks like this: 1. VisualEditor toolbar-en- for TROER.png

Entering Text

Just type in text or copy paste from your existing text file (.doc or .odt) into the wiki page

Formatting text

1. VisualEditor toolbar-en- for TROER.png

Use the toolbar to do the basic text formatting like bold, italic and underline etc.Once you click on the "A" icon from the toolbar, you will get all the formatting styles.

  1. Bold : Select the text, click on the "A" icon from the visual editor tool bar and select bold.
  2. Italic : Select the text, click on the "A" icon from the visual editor tool bar and select Italic.
  3. Underline : Select the text, click on the "A" icon from the visual editor tool bar and select Underline.

Headings

Headings pull-down menu allows you to change how the paragraph is formatted. To change the style of a paragraph, put your cursor in the paragraph and select an item in this menu (you don't have to highlight any text). Section titles are formatted "Heading", and subsections are "Heading 2", "Heading 3", and so on. The normal format for text is "Paragraph".

2. VisualEditor Toolbar Headings-en.png

Creating numbered and bulleted lists

If you want to start your text by putting number or bulletin, click on the Numbering and bulleting icon(appears like three small line), and select required option.

Numbering looks like below :-

  1. Kannada
  2. English
  3. Hindi

Adding bullets will format like below :-

  • Kannada
  • English
  • Hindi

Special character

If you want to add any extra characters like symbols etc. click on the character icon from the visual editor toolar and select the characters from the list.

Inserting Table

1. You can insert Table in TROER by using "Insert" >> "table" option from the top tool bar. (Also you can even import a table by dragging a comma-separated value (.csv) file from your computer into the main editing window).

2. When you click on "Table", in the "Insert" menu, the visual editor inserts a blank four-by-four table.

VisualEditor insert table.png VisualEditor empty table.png

3. Now the "Table" menu is available. From that menu, you can add a caption to the top of the table.

Editing a table using VisualEditor, small.gif

4. To select any cell, just click in the cell once.

5. To edit the contents of the cell (for example, to add content or to correct a spelling error), double click in the cell. Or you can select the cell and then press Enter key from your keyboard.

6. To end your editing of a cell, just click elsewhere outside the table

7. You can add or delete a column or a row by clicking on the side arrow marks.

External Web link

VisualEditor - Toolbar - Linking.png
4. VisualEditor-link tool-external link.png

When you want to link a page from outside the TOER website, (external link)

Click on the "Link" icon (links in a chain) in the toolbar.

If you select (highlight) text and then press the "Link" button, that text will be used in creating the link. For a link that involves just one word, you can either select that word or just put the cursor within that word.

Once you have entered or selected the link, you complete the linking process by pressing ↵ Enter or by pressing the "Done" button. Your link will immediately appear on the page, but as with other changes to the page, it will not be saved until you save the entire page.

Internal Web link

5. Internal Link TROER.png

When you want to link a page from within the TOER website (internal link). Select the word which you are going to give another TROER page link then click on the "Link" icon(Links in a chain) in the tool bar, and enter the page name (within TROER page). It will show you the list of the pages are already in the TROER. Select the link which you want to insert here and press "Done".

Inserting math Formula

If you want to type any Maths formulas , click on insert -> more -> formula and from the the formula window select formula and replace the default value and do change as requires and finally click on Insert.

Uploading and Inserting Files

Upload File

If you want to upload any file (text file, .mm, images, audio, videos- only .ogv format and .pdf) into the TROER, You just click here for uploading file(or from side panel, goto "Tools">>"Upload file".

1. Upload files.png1. Click on the browse and browse your file from the computer(your file size should not be more than Maximum file size).

2. After your file selected, you have to fill the required details under "File description" for completing the upload file process.

2. Upload files.png

3. Upload files.png

3. After entering all the above details, finally click on the "Upload file" .

Inserting image

This refers to inserting uploaded files into your current page

1. To add your uploaded image (or another type of media file) to the page which you already uploaded, click the "Media" icon (a picture of mountains) in the "Insert" menu.

VisualEditor Media Insert Menu-en.png

2. Clicking the "Media" icon opens a dialog that open search box, just type your uploaded file name and it will start searching from TROER for media files related to the title of the page you're searching.

3. After the image you selected is inserted into the page, another dialog will open. This dialog allows you to add and edit the caption of the image. The captions.

4. You can also set various parameters for the files in the "Advanced settings" window (for mind map, select frame less and click in insert). These include the alignment, the type, and size of the image.

5. When you're done, click "Insert" to close the dialog and return to editing the page.

The image will be added wherever your cursor is.

Advanced Editing

In TOER, we upload text and mind maps, other resources are uploaded elsewhere and then linked/embedded on the TOER using widgets and other methods -

  1. Geogebra files - Geogebratube
  2. Presentations - slide show in Slideshare
  3. Videos - Youtube or Vimeo
  4. Podcasts (audio files) - Yourlisten or Soundcloud
  5. Gallery - adding photos as a gallery which is used for showing two or more images.

Most of these resources except Gallery are from external repositories.

Inserting video

To embed any youtube videos to your current page,

  1. Select "Template" option from the "Insert" menu.
  2. Type youtube in the template search box and select YouTube from the list,
  3. In the next window it will ask you to enter your youtube video ID.
  4. For finding your YouTube video ID.Look at the URL of youtube video, and at the end of it, you should see a combination of numbers and letters after an equal sign (=). Example: https://www.youtube.com/watch?v=PTaL1s3YJPY in this youtube link "PTaL1s3YJPY" is the video ID.
  5. Like above you need to enter your video ID in the video ID box and click on INSERT, finally save your page to see the youtube video in your page.

Inserting mindmap

  1. Click on Insert -> Media
  2. Type the exact name of your mindmap file. For eg., File:Mymindmap.mm
  3. Select the mindmap and click on Use this image.
  4. Go to advanced settings and uncheck wrap text under position. Select flameless and click on full size.

Alternatively, on the source editor it can be inserted through this [[File:Mymindmap.mm]].

File:Student ICT curriculum.mm

Inserting slides

  1. You can insert slides from a ODP, PDF, PPT files using slideshare.
  2. Create an id for yourself on http://slideshare.net (this is very easy, like creating any id for any web service)
  3. Upload your file on http://slideshare.net
  4. Click on share file and select the 'embed code' then you will get a link like:- {{#widget:Iframe |url=http://www.slideshare.net/slideshow/embed_code/48241562 |width=450 |height=360 |border=1 }}
  5. In above link "48241562" this is the 8 digit wordpress code.
  6. Copy the 8 digit word press code
  7. Click on '''Insert''' >> '''Template''' >> in the search box search " slide share" and select the slide share template and click on '''"Add Template"'''.
  8. It will ask your your slide share 8 digit express code, just paste your copied 8 digit wordpress code.
  9. Finally click on '''"Insert"'''.
  10. For see the embeded slide file, click on the '''"save page"'''. it will looks like below

Inserting audio podcast

  1. It is easier to create audio resources than video resources. Audio resources are very useful for language learning. They are a very useful complement to the usual print resources. While print resources support the 'reading/writing' skills, audio resources can support the 'listening/speaking' skills.
  2. You can record an audio resource on your smart phone or on your computer.
  3. You can edit the audio resource using a public software like audacity. Editing can reduce/remove unwanted sounds, add background music etc.
  4. The final audio clip can be uploaded on http://yourlisten.com and the link provided on TOER

Inserting Geogebra file

Steps in uploading a Geogebra file to Geogebra tube

  1. Create a Geogebratube ID; you must login to upload material
  2. On the toolbar, click on Upload Material
  3. Choose File (browse for files on your computer) and then click upload
  4. It will display a progress bar for upload
  5. Provide explanations as necessary for students
  6. You should add any questions you want to ask in worksheet for students
  7. Click on “Continue Uploading”
  8. It will display a progress bar for upload
  9. Enter Title of file
  10. Enter other information for other teachers
  11. Choose language, target Age
  12. Definitely add tags to help search for file better - eg., chord, tangent, multiplication, etc
  13. Save the file

Steps in embedding a Geogebra file in TROER

  1. Open the ggb file in Geogebra materials site
  2. Click on Share -> Mediawiki.
  3. Copy the id and paste it in Insert->Template->Geogebra->id and click on Insert and save to see the geogebra file on TROER.

Inserting Gallery

When more two or more images needs to shown in a wikipage, it is recommended to use Gallery feature in a wiki. This can be using <gallery> tag in the source editor. Please follow below steps to do that -

  1. Click on Edit source of the page or section where the gallery needs to be inserted.
  2. Insert the Filenames the images you want withing the <gallery> as shown below:
<gallery mode=packed heights=200px>
File:Detroit Publishing Co. - A Yeoman of the Guard (N.B. actually a Yeoman Warder), full restoration.jpg|A Yeoman Warder, from a Victorian-era [[photochrom]]
File:Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
File:Thurston, the famous magician - East Indian Rope Trick.jpg|[[Howard Thurston]] performing the [[Indian rope trick]]
File:Joseph Ferdinand Keppler - The Pirate Publisher - Puck Magazine - Restoration by Adam Cuerden.jpg|"The Pirate Publisher", a satire of copyright infringement from the magazine [[Puck (magazine)|Puck]].
</gallery>

Above syntax will return the gallery as shown below:

To left-align the captions, specify the CSS declaration text-align:left in the style= attribute:

<gallery mode=packed heights=150px style="text-align:left">
File:Detroit Publishing Co. - A Yeoman of the Guard (N.B. actually a Yeoman Warder), full restoration.jpg|A Yeoman Warder, from a Victorian-era photochrom
File:Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
File:Joseph Ferdinand Keppler - The Pirate Publisher - Puck Magazine - Restoration by Adam Cuerden.jpg|"The Pirate Publisher", a satire of copyright infringement from the magazine Puck (magazine).
</gallery>

gives:


Captions for the gallery can also be added with caption inside the <gallery> tag:

<gallery caption="Sample gallery" widths="180px" heights="120px" >
File:Example.png
File:Example.png|Captioned
File:Example.png|Captioned with alt text|alt=The Wikipedia logo
File:Example.png|[[TOER wiki help|Links]] can be put in captions.
File:Example.png|Full MediaWiki <br/>syntax may now be used...
</gallery>

Which produces:

Complete reference for all the available modes and options can be seen here - https://en.wikipedia.org/wiki/Help:Gallery_tag

Working with Images

  • Captioning image
  • Captioning gallery, size depending on number of images
  • Use visual editor to do it in steps and make template for gallery
This is single image with wrapping

For all explore an application pages, please follow below methods when you insert image(s) to the pages depending on different cases as described below.

  1. Single image with wrapping: When the image is very small and there is enough text around it you can insert image as thumbnail to the left side of the page with this syntax.[[File:Save Window.png|thumb|This is single image with wrapping]] Please add {{clear}} at the end of the sentence where you want it to end.
  1. Single image with no wrap: When the image width is too wide like this one, entire page width can be occupied and this syntax can do it: [[File:LO Writer 4 Menu Bar.png|1000px]] LO Writer 4 Menu Bar.png
  2. Single image with border less table: When the image needs to carry big description along with it, then a border less table can be used to show it with this syntax.
Most of the formatting options available in LibreOffice Writer are available in Calc also. Making the text bold, italicised, increasing/reducing font size, font color etc are all available. Data can also be formatted based on its nature – numeric information can be assigned “,” separators. LO Calc 1 viewing a spreadsheet.png
4. Two or more images: For two or more images, Gallery can be used to with appropriate heights in packed mode and align left with text-align:left in the style= attribute as shown in above Inserting Gallery section. Write the description of the images outside the gallery.

Creating pages and adding template

New page

To create a new page, Goto to browser address bar and after "http://teacher-network.in/OER/index.php/" type your new page name and press Enter. After this if the page is not exist in this website, it will show you like Create the page "new page name" on this wiki!.

Now click on your new page name link(will be in red color), and start editing your page and click on the save page button.

To add template in your page:

Once a page has been created, the content template must be added. The syntax is as follows:
{{subst:Math-Content}}
{{subst:Science-Content}}
{{subst:SS-Content}}

Once an activity page has been created, the activity template must be added to each page.

The syntax is as follows:
{{subst:Math-Activity}}
{{subst:Science-Activity}}
{{subst:SS-Activity}}


Useful reports from wiki

What changes have been made on any wiki page - and who has made them

At the bottom of each wiki page, the link 'history' is provided. Clicking this will give us all the changes made on that page, when it was made and who made it. Any changes made by mistake can be 'rolled back' or deleted.

To get the changes made on the entire TOER wiki, click on 'Recent changes' on the left frame

User list

To get a list of all the wiki editors, we can visit

Forgot password / cannot login

  1. Check if your user id is created, visit Special:ListUsers pages in the wiki and see if your id is there
  2. if user id not created, then write TOER@KarnatakaEducation.org.in and ask for a wiki id. Note that normally wiki id will be given in a training workshop
  3. If user id exists, but you have forgotten your password, then Click on Log in button
  4. Click on ' Forgotten your login details? ' and ENTER your WIKI ID
  5. WIKI will send a mail to the 'Connected email id', provided during the creation of the login-id
  6. Open your email. Click on the weblink in your email and you will connect to DIET WIKI
  7. Click on your wiki link
  8. Enter your wiki id and your NEW password to login. (keep this NEW PASSWORD CAREFULLY and do not lose it)
  9. You will see your id on the top right part of the screen

Steps to use Wiki to create a web-site

  1. Identify the audience for the site - who do you want should see the site
  2. Collate the information you want to share through the site
    1. Information about the institution - plans, programmes, staff
    2. Detailed information about programmes - objectives, scope, approach, activities, status, challenges/risks, outcomes
  3. Try and collate information in different formats
    1. Text information, images/photos/pictures, videos, animations, existing web links
  4. Make a 'design' for your site - home page contents, other pages. This is similar to designing a home - based on needs, how many rooms and for what purpose. Good news is that you can always add pages to your wiki whenever you want, and add/modify/remove content, which is not so easily possible with a house!!
    1. Home page should be simple and clear. Avoid jazzy styles.
    2. No information should be too lengthy on home page. Use additional pages for providing details.
    3. Cluster/categorize information and provide it in pages based on such categories/clusters.
    4. Any page address (web link) should be provided either on the site home page, or on another page, based on relevance. This can help user to reach any page from the home page. Of course, user can reach a page just through the web address as well.

How to edit TOER wiki sidebar

Click here to edit our TOER wiki sidebar . After you click on this just follow the normal wiki editing formating for adding menu and sub menu etc.

How to create print version and get pdf of books on wiki

We have Student Textbook and Teacher Hand Book collaboratively done on this wiki and we have prepared Print versions and pdf copies of the same. Below are the steps on how to do this on any wiki. Please note this needs to be done only once and Print versions are automatically updated from the book. Pdf can be generated from the left side Download as PDF link under Print/export.

Generally, it is a good solution to learn from examples. See ICT teacher handbook/Print version and read these quick guidelines.

Preparing a book

No navigational templates used in a book should be printed. Check this using the "Print preview" function of your browser. To prevent a block of text from being printed, cover it with <div class="noprint"> ... </div>. Use class="notice" or class="notice metadata" for cleanup templates like {{stub}}, {{cleanup}}; or <noinclude> ... </noinclude>. Similarly, if you want some content to be displayed only in the print version but not at normal reading, use <includeonly> ... </includeonly>.

Creating separate page for print version

In brief:

  1. Create the page Book/Print version (for a book called Book) and link to it from the TOC
  2. Insert the {{print version notice|Book|Book/Print_version}} template to the top of the book's Print version page.
  3. Insert every chapter like a template, preceded by the chapter's title.
    = Chapter name =
    {{:Book/Chapter name}}

Do not cut-and-paste any text from a book to its print version.

Linking from the book

Make a visible link to the print version from the book's cover or table of contents. You can simply insert the {{print version}} template in the page Book if the page of the printed version is Book/Print version to create a box like the one shown.