Slide numbering for course developer that doesn't use/affect page title?
October 28, 2022 12:00 AM
My boss wants to have numbers before each course page/slide while developing the course so we can reference pages quickly (numerically) while in QA. But I'm using some templates that have automated slide titling that is based on what you name the page. I don't want the numbers being added to the page title when published. Is there a dev-mode page/slide numbering system that's hidden, which shows up just for course developers but won't publish or alter the page title? Thank you.
Solution
How is your team reviewing these pieces? Are you sending the raw content along for them or are they taking it online?
There are many ways to fry this fish.
Option 1: Put a counter in place.
There are automated features that allow you to put something like, PAGE X of Y where the X and Y are automatically calculated. You can many setups, but I've provided one - see
Project - PagesInTitle.zip
below.
And when you're done with these, you can either delete it completely or remove the
Show Text
action that is under the text block. If you go with the later, you can easily enable/disable whenever necessary.
Option 2: Utilize JavaScript
With a bit of JavaScript, you can easily make whatever happen you want to happen. Take a look at what I have below in
Project - JS Solution.zip
This takes your title in, splices the title at the first space (' ') and then shows the title onscreen.
To do this, you need to do the following....
Label your titles as required, BUT make sure there is a space after your identifier (e.g. 1 Supervisor Do's/Don'ts).
Insert a textbox at a parent location (or whatever location you wish).
Add an action to the textbox.
Set that action to run on Page Show.
Set the action type to Run JavaScript.
Insert the JavaScript code at the bottom of this list.
Change the
text578
in the JS code below to the
HTML Name
of the text box.
Test and voila, you have your numbering in the raw development software but not in the content being displayed.
JavaScript:
var tempTitle = VarCurrentPageName.getValue();
tempTitle = tempTitle.substring(tempTitle.indexOf(' ')+1);
text578.actionChangeContents(tempTitle, 'alignleft','1');
How does the JavaScript Code work?
I capture the title of the page and place it into a temporary variable for me to work with.
I split the string at the first instance of a space (' '). It does this by using the substring function and then assigns the integer of the first space (' ') in the string using the indexOf function.
I then add 1 to my string indexOf location in the substring otherwise it would include a space in front of the title when projected on screen.
Change the textbox contents to display the page title set in the development stages without the number in front.
Personal Opinion
Tbh. I think working in the past isn't always the best way to go, as you said, trying to get ppl to change gears isn't always easy but it is often the only way to go. I've had this with my own corporation, but they got on board and moved forward because if you cannot move forward, you'll be forever in the past and your products will be forever handcuffed and hindered.
Discussion (16)
Hi,
Why not use ReviewLink? It's free to you and it tracks all comments together in one place, allowing you to click them and reveal the page the comment is associated with. Just a thought.
Otherwise, maybe can you use a Page Number object?
You could make it initially hidden, and only show it when you do some action (like when you click a transparent button that is in a certain part of the screen).
I was hoping for something like this (attached) . . . I've been doing graphic/web/media design for 25+ years and my eyes aren't as sharp as they used to be (need readers now! :-( ) so any kind of navigational assistance on where I'm at, especially when communicating with my boss on IM a few hallways down about something on a specific slide, would help immensely. It's also difficult to introduce new ways of reviewing things that involve changing someone else's behavior (using new tools, etc.), so thought I lay this idea out there. I'd figure it's fairly simple for developers?? It would be so nice to have a slide numbering system that's just in the left nav panel but not affecting page titles! Thanks +AIO
*edit: I realize slide 24 should be one item down!*
You don'
t
edit the
HTML Name,
you
replace
the
text578
that is in my code with the one that you have. Those are auto set by the application for obvious reasons.
Can you please share your file with me or screenshots of the actions you have in use for this? I'm assuming you have an action that has an OnShow for something that isn't not quite right OR your JavaScript isn't compiling.
If you cannot share your file, at a minimum please share a screenshot of your JavaScript.
andrew-robertson
- Thank you! I had not seen that. However, I was not able to edit the field HTML Name, so I just copied that into the js where you had text578 (assuming it's a Lectora self-naming feature). But now I've got a new problem since I cannot test this . . . suddenly both Run and Preview are returning a blank screen. Any ideas? Thank you for providing the solution to my issues . . . I will select your answer as the fix, but not sure why previewing won't work with this change.
--Sorry, forgot to upload the photo with original comment.
Thanks @
andrew-robertson
for the suggestions. I will try these out. Seems a tad complex for something that
should
be built into the interface for the developers IMO (without having to Run or Preview to see page #s), but I guess you gotta work with what's there. I'm not a js person but your option with that seems short and sweet so I'll give it a try. :-)
Appreciate it!
@
andrew-robertson
- (I changed the Yes to I don't know on your answer solving my question, because I've got a question about one of your steps): Your Project JS Solution was what I wanted to try implementing. This option made sense and I followed the logic and when I downloaded and ran it in Run/Preview it worked swimmingly. But in order to get this working in my existing course, I'm stalled on step 7: "Change the
text578
in the JS code . . . to the
HTML Name
of the text box" . . . other than in the js, I don't see another reference to "text578" as an HTML label of a text box somewhere. Where do i find this so I know how to replicate in my own course? Hope this makes sense.
How is your team reviewing these pieces? Are you sending the raw content along for them or are they taking it online?
There are many ways to fry this fish.
Option 1: Put a counter in place.
There are automated features that allow you to put something like, PAGE X of Y where the X and Y are automatically calculated. You can many setups, but I've provided one - see
Project - PagesInTitle.zip
below.
And when you're done with these, you can either delete it completely or remove the
Show Text
action that is under the text block. If you go with the later, you can easily enable/disable whenever necessary.
Option 2: Utilize JavaScript
With a bit of JavaScript, you can easily make whatever happen you want to happen. Take a look at what I have below in
Project - JS Solution.zip
This takes your title in, splices the title at the first space (' ') and then shows the title onscreen.
To do this, you need to do the following....
Label your titles as required, BUT make sure there is a space after your identifier (e.g. 1 Supervisor Do's/Don'ts).
Insert a textbox at a parent location (or whatever location you wish).
Add an action to the textbox.
Set that action to run on Page Show.
Set the action type to Run JavaScript.
Insert the JavaScript code at the bottom of this list.
Change the
text578
in the JS code below to the
HTML Name
of the text box.
Test and voila, you have your numbering in the raw development software but not in the content being displayed.
JavaScript:
var tempTitle = VarCurrentPageName.getValue();
tempTitle = tempTitle.substring(tempTitle.indexOf(' ')+1);
text578.actionChangeContents(tempTitle, 'alignleft','1');
How does the JavaScript Code work?
I capture the title of the page and place it into a temporary variable for me to work with.
I split the string at the first instance of a space (' '). It does this by using the substring function and then assigns the integer of the first space (' ') in the string using the indexOf function.
I then add 1 to my string indexOf location in the substring otherwise it would include a space in front of the title when projected on screen.
Change the textbox contents to display the page title set in the development stages without the number in front.
Personal Opinion
Tbh. I think working in the past isn't always the best way to go, as you said, trying to get ppl to change gears isn't always easy but it is often the only way to go. I've had this with my own corporation, but they got on board and moved forward because if you cannot move forward, you'll be forever in the past and your products will be forever handcuffed and hindered.
Oy, reading your issue posted back in March of last year which came up when I searched for Run/Preview rendering a white screen. I'm going to try a reboot to see if that will fix my problem (although you had been using Lectora 18 I believe . . . I've just upgraded to L21, so not sure if it's the same issue.
Click on your text box, then go to PROPERTIES, then the additional options under the TEXT area.
Replace
text578
with %HTMLNAME% that way you don't have to look it up and if you copy it to a different project it will still work
Awesome, @
andrew-robertson
, grabbing that momentarily. Appreciate the extended help. :-)
Thank you both for the help on this! (Now just to figure out why the Run/Preview won't render the course visually
). Appreciate the help!!!
, I bet I know the cause of your issue. Take a look at the JavaScript (I couldn't see code you copied/pasted, because it is cut off in the window), by clicking the expansion button that I highlighted below in purple.
Assuming that you copied/pasted the code directly from this page, I bet there are some characters that weren't copied/pasted just right. First check the quotes, I think I used single quotes so those remove one and replace it and then do the same with the others.
I put the code into the
JSFiddle - Code Playground
to ensure there are no formatting mistakes if you need to be double sure that the code is copied properly just remember to replace the HTML Name (see the prev link).
If you're still getting stuck, you could zip your file up and share it if possible.
, beautiful - thx for the enhancement. Do you have a list of these variables or calls that we as power users can get our hands on? Also, to confirm, this only applies on the object in which the action is a child of correct?
here is a bit more about that tip. I'll see what I can do to share some more insights and tips.
https://rockstars.elearningbrothers.com/discussion/comment/454838/#Comment_454838
Thx
, still learning a lot and I appreciate the added info you provided.