Fly-out student notes panel in Storyline...

Evening All,

I have been having a bit of a play this evening as I wanted to do something in Storyline that I haven't seen before.  I'm building some case studies for a client where students are asked to consider their response before reviewing and reflecting on the recommended answer.  I wanted to give the student a place on-screen to record their thoughts but didn't want it to take up a large area of the screen.

So, I used some layers and animations along with a text variable to build this demo:

http://vle.redtwenty.com.au/x/notes/story.html

There are two versions here, one using a marker to close the panel and the other with the tab attached to the animated panel.  I used the same text variable for both as I wanted a notes panel that would retain recorded notes from one slide to another.

See what you think.  If anyone wants to take a look at what I did I have attached my story file.

Cheers,

Mike

RedTwenty

19 Replies
Helen Tyson

It's a great idea, and I've been working on this too with a client.  We decided to try using a lightbox slide triggered from a player tab, or on-screen button if non-flash output is needed. It works nicely in the first instance however we have come across one problem...

The issue is that if you enter text, close the panel and then go back to enter more, when you click into the text entry field you highlight the existing text so it is very easy to remove your existing notes if you happen to catch any other keyboard key than the arrows.

I've submitted a case earlier today to ask if there is a way of forcing the cursor to the end of the text, and will let you know what comes of it.

H

Mike Walters

Thank for the replies!

To answer a couple of the questions...

The strangeness on the close button is me being a smartypants with the animations.  The close button, rather than hiding the notes layer, triggers a transition layer that has the fly-out animation in it.  It would probably be neater if the close button just made the panel disappear but I wanted to see if I could make it slide in and out.

Helen, I noticed that problem also with the highlighted text.  It is a pain but something worth noting if any support guys are reading this is that it happens in the web version but not on the iPad.  Maybe it is a Flash v HTML5 thing?

Incidentally, I also considered the lightbox slide but I know my client is pushing the whole iPad thing at the moment and have had the lightbox problem before.

Cheers,

Mike

Mike Walters

I've just been having a bit more of a play with this to see if it is possible to print the notes out at the end.

It does seem to be possible, sort of...

I've published my test module to the same place > http://vle.redtwenty.com.au/x/notes/story.html

It adds an "essay" survey question with the text area set to use the same variable as the notes panels.  I disguised this (poorly) as a "review and edit you notes" slide, then move to a results slide that displays the "finished" notes and allows the user to print them.

There are a couple of problems with this though:

  1. The print screen is not very pretty and it contains loads of columns that are unused in this instance.  We need a clever person to locate this file in the output and edit it to return only the basic information (name, date, course) and the "Student Answer" column with the title "Student Notes"...(pauses for offers)...
  2. If a sneaky person was to publish this module to SCORM and deploy it correctly in something like Moodle, it would be possible to read what each student had written.  This could be a bit of a privacy issue unless you let them know that their notes may be recorded.
Mike Walters

You're not wrong there Joyce!  See Helen's post above - it seems we have found a small "bug" of sorts.  Hopefully the support guys can find a way round this as it is a bit annoying.

I had tried using a new text variable for each new notes panel and referencing the previous variable to print the existing notes but that doesn't seem to want to work.  You can't put a variable inside a variable!

Cheers,

Mike

Bruce Graham

Hi,

After seeing a client who did this in Presenter using Quizmaker, I tried this recently using a non-scored "Essay" Question type set to 10000 characters, and appearing in a Lightbox.

Sort of worked.....

As above, integrity of the text, and over-writing is a major drawback, but would make a WONDERFUL piece of functionality if it were made more stable and easily printable.

Bruce

Erika Romenesko

Very nice! Thanks for sharing Mike! I am working on a similar sort of thing. I want them to have a place to take notes throughout the session. Similar to someone above, I am using a lightbox slide on the player menu. The notes do stick when moving from slide to slide.

The text box is tied to the variable "UserNotes." I have a trigger set to set UserNotes to the typed balue when the control loses focus.

Similarly, I have a text box tied to variable "UserEmail" and also have a trigger set to set UserEmail to typed value when the control loses focus.

The button...

I have a button "Email Your Notes" set to execuate JavaScript when clicked. I found this JavaScript on another post that I can't find. (Sorry that I can't find to give this person the credit!)

var player = GetPlayer();

var email=player.GetVar("UserEmail");

var subject="My Member Talk! Notes";

var body_start=player.GetVar("UserNotes");

var mailto_link='mailto:'+email+'?subject='+subject+'&body='+escape(body_start);

win=window.open(mailto_link,'emailWin');

I am looking for some help on the Print Notes button. I want to create some JavaScript that will print just the text that is set in the variable "UserEmail".

Any ideas or suggestions for resources are appreciated!

Meryem M

Mike Walters said:

  1. The print screen is not very pretty and it contains loads of columns that are unused in this instance.  We need a clever person to locate this file in the output and edit it to return only the basic information (name, date, course) and the "Student Answer" column with the title "Student Notes"...(pauses for offers)...

Mike,

This article explains how to locate and edit the printed results in Quizmaker.  I haven't tried it yet, but the file structure seems the same in Storyline.  I also am working on how to print a journal or student notes, though I haven't worked through the instructions in this article, I've got it in my files for something to investigate as time permits.

http://daveperso.mediaenglishonline.com/2009/03/11/customizing-the-printed-results-in-quizmaker-09/

Helen Tyson

In regard to my earlier post the reply from Support is that the highlighting behaviour is a bit of a bug and is due to be fixedin the next release as indicated here: http://www.articulate.com/support/kb_article.php?product=st1&id=lmbqrjtyz0fj  and the current solution is to navigate away from the pre-highlighted area using you arrow keys

H

Diana Jaffee

Nicely done Mike! We had used a notes taking widget for a course created in Studio '09. We were concerned that when we move the course to SL we'd lose that function  unless a SL widget was created, but it looks like you may have done it! Can't wait to open up the SL files to see how you did it. Thanks for sharing!

Mike Walters

I've just had a Twitterer (? or is it Tweep?) ask if I can share how I did this so I thought I'd upload a template file along with some notes so he can see it.

So, all it really is is a new layer in a slide with a text variable in it.  By repeating this text variable in the same (or similar) layers in different slides we carry the student's notes over into different slides or scenes.

I used a shape on the main slide for the button (a shape seemed to work better than a button) with a trigger that simply shows the notes layer.  On the notes slide the trigger shape is repositioned and another shape used to hold the text area. I used a sliding transition on the notes layer so it drops nicely into view (shame it can't go back the same way).

Sadly, there are a few drawbacks and things to be considered...

  1. When a student enters notes and then reopens them in another slide, clicking on the notes area to add more highlights the entire text.  The only way to add notes without erasing what is already there is to use the arrow keys to move to the end of the current text.  See Helen's post above - this is a bug and will be fixed, just a bit painful for now.
  2. When you copy/import the notes layer into a new slide it will assign the text area a new number (textarea1, textarea2 etc.).  You will need to make sure that you manually reset the variable in each to the same as your first notes slide.

Another thing I tried the other day was to put the notes area into a separate slide and then jump to and from it via buttons.  You could also put it into a lightbox slide (would be cool but I don't think it would work on the iPad).  I didn't go down that route because I wanted something that was part of the slide but at least this option would minimize the multiple variable issue.

Anyway, hope you found this @tacoold!

Cheers,

Mike

Emma  Weir

Erika Romenesko said:

Very nice! Thanks for sharing Mike! I am working on a similar sort of thing. I want them to have a place to take notes throughout the session. Similar to someone above, I am using a lightbox slide on the player menu. The notes do stick when moving from slide to slide.

The text box is tied to the variable "UserNotes." I have a trigger set to set UserNotes to the typed balue when the control loses focus.

Similarly, I have a text box tied to variable "UserEmail" and also have a trigger set to set UserEmail to typed value when the control loses focus.

The button...

I have a button "Email Your Notes" set to execuate JavaScript when clicked. I found this JavaScript on another post that I can't find. (Sorry that I can't find to give this person the credit!)

var player = GetPlayer();

var email=player.GetVar("UserEmail");

var subject="My Member Talk! Notes";

var body_start=player.GetVar("UserNotes");

var mailto_link='mailto:'+email+'?subject='+subject+'&body='+escape(body_start);

win=window.open(mailto_link,'emailWin');

I am looking for some help on the Print Notes button. I want to create some JavaScript that will print just the text that is set in the variable "UserEmail".

Any ideas or suggestions for resources are appreciated!


This looks like an excellent note taking solution. A template for this would be a wonderful resource