The Primary Instance of a course is a special nomination that can be given to one instance of each course at a time. It gives the instance a special URL that has the course name slug twice instead of having the course name slug followed by the instance name slug. The main use case is to be able to get a shareable link that will always point to the most recent course instance. This way links to Lovelace courses from other sites will not become obsolete whenever a new course instance is created.
Content Markup Reference¶
Markup
in Lovelace is divided into two categories: stand-alone and inline. Stand-alone markup always needs to be on its own separate line while inline markup can be contained within a paragraph. Inline Markup¶
Simple¶
- bold text
'''bold text'''
- italic text
''italic text''
- marked text
!!!marked text!!!
inline code snippet
{{{inline code snippet}}}
"inline code snippet with syntax highlight (python)"
{{{#!python "inline code snippet with syntax highlight (python)"}}}
- K e y s
`K` `e` `y` `s`
- colored
colo[!color=red!]red[!color!]
Inline Links¶
Inline links can point to within-course-instance addresses by page
slug
or to external addresses by full URL. When linking internally, the linked page must be within the same course instance - links between different course instances have to use full URL. [[lovelacen-markup-opas|link to this page]]
[[https://docs.python.org/3/|link to Python 3 documentation]]
[[file:llguide-testfile-txt|link to a file]]
Triggerable Highlights¶
Triggerable highlights
are a way of drawing student attention to marked passages in the text. They can be activated by file upload exercises
when they return the evaluation. Currently they are the only type of exercise that support these highlights. Fun fact: you can even highlight passages that are on the parent page of the exercise
Terms¶
You can mark words to trigger a
term
definition popup when the mouse cursor is hovered over. The syntax for doing that is:[!term=Term!]term[!term!]
Where the term name is case sensitive and can contain spaces. The term name is also shown in the course's term bank. When you include a term within a content page, it must exist before saving the content page. You can find more information about managing terms by following the link in the term popup.
Deadlines¶
If you are using deadline settings for your nodes, you can display the deadline in content with the deadline tag. The syntax for deadline tag is shown below.
[!dl=lovelacen-markup-opas!]
This displays the deadline of this page, and currently it is 2040-01-01 23:59.
Deadline tags are helpful in managing your course by allowing you to set the deadline in just one place while displaying it in multiple places.
Deadline tags are helpful in managing your course by allowing you to set the deadline in just one place while displaying it in multiple places.
Grade Thresholds¶
If your course uses grading with score thresholds, you can display these score thresholds on pages with the threshold tag. The syntax is shown below.
[!threshold=Pass!]
This displays the score threshold for getting the Pass grade from this course, which is 5.
Like the deadline tag, this also helps you avoid conflicting information when you update grade thresholds.
Like the deadline tag, this also helps you avoid conflicting information when you update grade thresholds.
Stand-alone Markup¶
Bullets¶
Bulleted lists without numbering:
* bulleted item ** bulleted item indented more * second bulleted item ** another indented item
- bulleted item
- bulleted item indented more
- second bulleted item
- another indented item
Bulleted lists with numbering use # instead:
# bulleted item ## bulleted item indented more # second bulleted item ## another indented item
- bulleted item
- bulleted item indented more
- second bulleted item
- another indented item
Code Blocks¶
You can create a code block by enclosing lines between curly braces
{{{ This text is shown as a code block with monospace }}}
Just like inline code snippets, you can also define syntax highlighting (the syntax to do so is different)
{{{highlight=python3 def a_function(param): """ This function does nothing """ return }}}
which would give a nice result like so:
def a_function(param):
"""
This function does nothing
"""
return
Embedded Files¶
Code blocks are useful for short snippets of code, but if you have bigger examples it's better to upload them separately and then embed their contents. This way they also come with a handy download link. The syntax to embed a
file
is<!file=llguide-testfile-txt>
And the result:
Syntax highlighting is guessed from the file. If you instead want to just provide some files for students to download, you can add the link_only attribute:
<!file=llguide-testfile-txt|link_only=True>
This will only show the title bar and the download link:
In all cases the file must exist when the content pages is saved.
Embedded Pages¶
Embedding
pages
is generally used for gathering exercises into pages. The syntax is simple, and doesn't currently have any additional options. This embed was used above to include the triggerable highlight demo exercise.<!page=llguide-highlight-demo>
The referred page must exist when you save your content.
Embedded Scripts¶
You can embed javascript into content pages using iframes. You can either write the script into the iframe HTML, or you can include script files separately. These files should be created as
media files
, and must exist already. The syntax to embed an iframe with javascript is a bit wieldy:<!script=llguide-sample-animation-html|width=800|height=500|border=0|include=head:script=crafty-js,head:script=animcontrol-js,head:script=animate-js,head:script=llguide-sample-animation-js>
The width and height parameters define the size of the iframe. In this example, the javascript is divided into several files, and they are brought in with the include parameter, where each include file is separated by commas. The syntax for includes has three parts: where in the HTML to put the include (usually "head"), what's the type (usually "script" or "css"), and finally the media file handle. Note that parameters must always be given in this order.
Embedded Videos¶
You can also embed videos to iframes (technically you can do this for any external HTML). Videos are managed as media content in Lovelace, so you just embed the media object:
<!video=llguide-sample-video|width=800|height=600|>
Parameters must be given in this order. Once again the referred video link media object must exist.
Headings¶
Headings are marked with
=
characters on both sides of the heading, where number of =
characters defines the heading level. = Level 1 Heading = == Level 2 Heading == === Level 3 Heading === ==== Level 4 Heading ==== ===== Level 5 Heading ===== ====== Level 6 Heading ======
Headings from a page (including embedded pages) will also be parsed into the page index.
Images¶
Images
are embedded similarly to files and pages. Images are managed as media objects, and are referenced by the image handle. <!image=llguide-sleeping-shiba|alt=Shibe at slep|caption=Hard at work|align=left>
All of the parameters are optional, but if given must follow this order. The referenced image must exist.
Separators¶
--
Tables¶
A table row can be defined by || at the beginning, end and between columns. Subsequent rows will automatically be enclosed within the same table.
||'''Name'''||'''Grade'''|| ||Eeyore||1.0|| ||Winnie||2.0|| ||Tigger||5.0||
Name | Grade |
Eeyore | 1.0 |
Winnie | 2.0 |
Tigger | 5.0 |
TeX¶
Lovelace uses KaTeX for mathematic notation. See KaTeX functions reference for more information about how to write mathematical notation.
{{{math x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} }}}
x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}
Vector Graphics¶
Lovelace allows embedding scalable vector graphics markup insiden code blocks so that they will be rendered rather than shown. Vector graphics blocks use the same syntax as code blocks, but with different header variables. This feature is particularly useful in automated checking, allowing sophisticated checking programs to draw dynamic pictures as feedback to the student.
{{{svg|width=600|height=400 <rect width='50 height='50' x='275' y='175' stroke='black' fill='red'> }}}
Would draw this beautiful square:
Anna palautetta
Kommentteja materiaalista?