I’m not sure your “Like this:” code works like you think it does, because it looks like it would just make the footer visible and then hidden again immediately, since both :passagedisplay events in your code would happen immediately when the passage was displayed. I think you might actually want something more like this:
<<cont append keypress>><<character1>>How are you?<</character1>><</cont>>
<<cont append keypress>><<character2>>Fan-fucking-tastic!<</character2>>
<<run $("#footer-div").css({ visibility: "hidden" })>><</cont>>
<<script>>
$(document).one(':passagedisplay', function (ev) {
$("#footer-div").css({ visibility: "visible" });
});
<</script>>
That would start out with the score visible in that passage and then hide the score once “character2” speaks. (I also changed the code to use the jQuery version of setting the style on an element, see the .css() method for details.) I am kind of guessing at what you actually want, though. Swap the “hidden” and “visible” if you want it the other way around.
Also, and this is very important, I changed the code to use the jQuery .one() method, instead of the .on() method that you were using. The reason why is that using the .on() method on a SugarCube event like that will add that to a list of events which trigger on every passage, which will gradually slow down your game due to adding another event trigger (or two event triggers, in your code) every time the player goes to another passage with that code. The .one() method, on the other hand, is a once-and-done event trigger, so it will only affect that one passage. If you set up an event trigger for a SugarCube event in your passages, you should always use the .one() method (this doesn’t apply to non-SugarCube event triggers). If you need the code to trigger during a SugarCube event in all passages, then that code belongs in the JavaScript section or the StoryInit special passage.
Well, if you want to do something like that, instead of creating a widget, you’ll have to create a macro using the Macro API (widgets only have a “head”, while macros can have “head” and “tail” parts, with contents inbetween, like what you want). If you take a look at the “Combining Story Passages” section of my sample code collection, that includes the code for a <<chunktext>>
macro, which should get you most of the way to creating what you want.
If you need help with any coding there, please feel free to ask.
P.S. Did a few important edits, so if you saw this before this “P.S.” was added, then I’d recommend going back to re-read it.