Fly-out student notes panel in Storyline...
Sep 24, 2012
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
19 Replies
I love the idea of providing participants the opportunity to take notes, Mike. This is a great idea to tuck away for future stealing! -k
Hi Mike
Nice I did something similar on a recent project (my menu popped up from the bottom) had to do it because the inbuilt notes were too small.
I like the idea of notes across the slides.
There is some strangeness on the close button, how did you get the repeating animation?
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
I love it! Thanks for sharing. Would be great to include an option at the end of the course to print their notes for future reference.
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
Just out of interest, I have just republished the demo (link in the first post) with a third screen.
This time I have removed all of the animations and so the panel clicks in and out rather than sliding. It actually looks and works kind of neater than the animated versions I think
Mike
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:
This is a great idea, however it appears that you need to copy and then paste all of your "previous" notes in order to keep from deleting them when you add more when you open the pannel again. Doing that lets your cursor be at the end of the existing notes before you type again.
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
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
Should be able to concatenate in javascript and save as a text file
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!
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/
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
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!
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...
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
I sure did find it! Diving into the template right now!
Thanks ever so much.
This forum & articulate is so helpful!
This looks like an excellent note taking solution. A template for this would be a wonderful resource
Did anybody find a solution to that text highlighting problem already? Doesn't seem to be fixed by the last update. I've tried a bunch of far fetched work arounds, but in the end the content of the text entry box is always highlighted...
This discussion is closed. You can start a new discussion or contact Articulate Support.