Lectora Advanced: Creating a Student Notes Feature

blog_LectoraAdvanced_Notes

Want to increase the interaction between your learners and your course material? Taking notes has long been considered a way to increase engagement and retention. What if your course included a feature that enabled learners to take notes directly inside the course and then print them out later? Open up Lectora® and follow the easy step-by-step instructions below (or steal from the example files), and your learners will be typing notes and printing them in no time.

First, let’s list the things that we want to include:

  1. A Notes Summary pop-up page containing the following:
    1. Text field that displays the notes taken
    2. Print button
    3. Close button
  2. A Notes Entry pop-up page containing the following:
    1. Entry field for notes
    2. Save Note button
    3. Note Summary button
    4. Text field that displays the current page name
    5. Close button
  3. A globally available Notes button for popping up the Notes Entry page.

For this tutorial, we’ll be using a shell title containing three chapters with one of the Lectora themes applied (On Display – Gray). The number of chapters is not significant as the feature will be global to a title of any size.

Screen Shot 2016-02-10 at 4.19.11 PM

Let’s start by setting up a Popups chapter and the two popup pages we designated in the list above.

  1. Add a new chapter after the last chapter in the title and name it Popups.
  2. Rename the default page inside the chapter to Notes Entry Page.
  3. Add a new page to the Popups chapter and name it Notes Summary Page.

Screen Shot 2016-02-10 at 4.21.39 PM

Now let’s set some properties for the Popups chapter and the pages it contains.

  1. In the Inheritance Settings for the Popups chapter, choose to inherit NO objects from parentsinheritance
  2. Set the page size for the Popups chapter to 480×450. (You can actually make this any size you like as long as it fits within the page size for the rest of the title.) pagesize
  3. Copy and paste the Exit button from the title level into the Popups chapter and position it in the upper-right corner of the page.
  4. Copy and paste the Page Title text block from the title level into the Popups chapter and position it in the upper-left corner. The Page Title text block and Exit/Close button will be inherited by both pages in the Popups chapter.

 

Now let’s add the elements needed for the Notes Summary Page.

  1. Add a Print button to the left of the Exit/Close button on the Notes Summary Page. If you are using a Lectora theme, you may find a print button that matches the theme in Stock Library > Media Online > Theme Stock Buttons. If you use a theme stock button, you can skip step 2 as it will already have the Print Current Page action attached to it.
  2. Add a Print Current Page action to the print button that is triggered by a Mouse Click.
  3. Add a text block to the page and resize it to fill most of the page.
  4. Type the following into the text block: VAR(_NotesSummary)
  5. Tick the Vertical Scroll property on the Properties ribbon for the text block.

noteSummaryLayout

 

This completes the elements needed for the Notes Summary Page. Now let’s put the Notes Entry Page together.

  1. Add a Text Block to the page and position it just below the page title and close button. Resize the block to be almost as wide as the page and to accommodate a single line of text.
  2. Type the following into the text block: VAR(_CurrentNotePage)
  3. Add a Form object from the Test & Survey ribbon.
  4. Add an Entry Field to the Form and resize it to fill the space beneath the text block, but leave a half-inch of space at the bottom of the page.
  5. Set the Max Characters to 250 and tick Multi-Line on the Properties ribbon for the Entry Field. entryfieldprops
  6. Add a Text Button and position it in the lower-right corner of the page. Change the text to Save Note and rename the button in the Title Explorer to Save Note as well.
  7. Add another Text Button and position it to the left of the Save Note button. Change the text to Notes Summary and rename the button in the Title Explorer to Notes Summary as well.

noteEntryLayout

 

Now that our pages for the feature are in place, we need to add a button to allow access to them.

  1. At the title level, add a new button and position it appropriately in the GUI layout. Name the button Notes in the Title Explorer. In this example, we are using the stock Transcript button that matches the On Display – Gray theme. This can be found in Stock Library > Media Online > Theme Stock Buttons > On Display > Gray.

notesButton

 

 

This completes all of the elements needed for the feature. Now let’s make it functional. First, let’s add a couple of User-Defined variables.

  1. Open the Variable Manager from the Tools ribbon and click the Add button at the bottom of the User-Defined tab.
  2. Set the Variable Name to _CurrentNotePage, delete the 0 in the Initial Value field, and click OK.
  3. Click the Add button again. Set the Variable name to _NotesSummary, delete the 0 in the Initial Value field, tick the Retain variable value between sessions checkbox, and click OK.

When the user clicks the Notes button, the _CurrentNotePage variable will be set to the name of the current page in the title from which the Notes Entry Page was popped up. The value will then be used in two ways. It will be used to display the name of the page for which the user is taking notes on the Notes Entry Page itself. The value will also be added to the beginning of each note that the student saves to identify on which page the note was taken.

The _NotesSummary variable will hold the contents of all of the student notes taken. Its value will be displayed in the text block on the Notes Summary Page. When the Save Note or Notes Summary buttons are clicked, the current value of the entry field on the Notes Entry Page will be added to the value of _NotesSummary.

varManager - noCharsRem

 

Now let’s add the actions for the title level Notes button.

Add the following actions to the Notes button in this order:

Action 1 – This action will set the value of the _CurrentNotePage variable which will be displayed on the Notes Entry Page.
                  Name: OnMClkModVar _CurrentNotePage
                  Trigger: Mouse Click
Action: Modify Variable
Target: _CurrentNotePage
Type: Set Equal To
Value: VAR(CurrentPageName)
Conditions: All conditions must be true
Variable: CurrentPageName
Relationship: Not Equal To
Value: Notes Entry Page

Action 2 – This action will pop up the Notes Entry Page in a lightbox window.
                  Name: OnMClkPopUpPage Notes Entry Page
                  Trigger: Mouse Click
Action: Display Page in Popup
Target: Notes Entry Page
Scroll To: Top of Page

 

Next, we’ll add the actions needed for the Notes Entry Page to function. First, we’ll add two actions to the Save Note button.

Add the following actions to the Save Note button in this order:

Action 1 – This action will save the value of _CurrentNotePage plus the current value of the entry field (Entry_0001) to the _NotesSummary variable. The value of Entry_0001 will be whatever the student has typed into the field.
Name: OnMClkModVar _NotesSummary
Trigger: Mouse Click
Action: Modify Variable
Target: _NotesSummary
Type: Add to Variable
Value: Notes for VAR(_CurrentNotePage) page: VAR(Entry_0001) [End] – –

Action 2 – This action will close the Notes Entry Page lightbox popup window.
Name: OnMClkExitClose
Trigger: Mouse Click
Action: Exit Title/Close Window

 

Now add the actions for the Notes Summary button.

Add the following actions in this order:

Action 1 – This action can be copied and pasted from the Save Note button. It is exactly the same.
Name: OnMClkModVar _NotesSummary
Trigger: Mouse Click
Action: Modify Variable
Target: _NotesSummary
Type: Add to Variable
Value: Notes for VAR(_CurrentNotePage) page: VAR(Entry_0001) [End] – –

Action 2 – This action will open the Notes Summary Page in a new window.
Name: OnMClkGoTo Notes Summary Page
                  Trigger: Mouse Click
Action: Go To
Target: Notes Summary Page
Scroll To: Top of Page
Open In: New Window

 

Now add an action to the Notes Entry Page itself that resets the Form when the page shows.

Action 1 – This action will reset all of the elements contained within a Form object and the values of their associated variables to their original empty states. In this case, it is just the entry field and its Entry_0001 variable. Without this action, the student would see whatever it was they had previously typed when they opened the Notes Entry Page again and duplicate entries would be added to the _NotesSummary variable.
                  Name: OnShowResetForm
                  Trigger: Show
Action: Reset Form
Target: Form_1 

There is one final thing that needs to be done to prevent the user from accidentally navigating to the Popups chapter using the Next button of the main interface.

  1. Disinherit the Next button on the final page of the content chapter preceding the Popups chapter.

inheritance2

 

The student notes feature is now functional. Publish your title and give it a try!

One thing you may notice while typing a note is that once you’ve reached the 250 character limit on the entry field, you can no longer type into the field with no warning. In my next blog, we will add a nice bit of user feedback to the Notes Entry Page that counts down the number of characters remaining that can be typed into the entry field.

For you hands-on learners and for those who cannot wait to see the characters remaining feature, you can download the completed example built from this tutorial on the Trivantis Community!

Lectora Advanced is for developers who want to get more creative with Lectora. In this blog series, Wendy Miller, Lead Content Developer here at Trivantis, will share Lectora tutorials that go beyond basic course development. Wendy is a visual designer and computer programmer with extensive experience developing software, courseware, web sites, games, and multimedia.

  • Shanny

    Hi, this is a great article and I’ve been thinking of implementing this feature for my elearning courses. I have a question – Will my LMS (Coursemill) be able to capture and report out the data stored in the variable? Or it can only be used to store within the session and for printing?

  • Evan

    Shanny, you can do this by having part of your course in a test or survey. I would suggest just the second-last page in the course (if it is a linear course). Make a copy of the next button and place your Process Test/Survey action on the next button and set the Behavior ribbon navigation to go to the next page. On the second-last page itself, add an Essay question and make it initially hidden. Add an action to write the NotesSummary variable value to the essay question value which will fire before the test/survey is processed.

    When publishing, make sure that the Report Test/Survey Question Interaction to the LMS option is checked.

    In Coursemill, you can run an interaction report to view the data entered by the learners.

    If you have any more questions on this, please feel free to send an email to support@trivantis.com and in the subject line, enter Attn: Evan