Here is a quick example game. Type WHITE to make the letter "a" disappear, and BLACK to make it reappear.
<!--Saved by Quest 5.6.5508.33899-->
<asl version="550">
<include ref="English.aslx" />
<include ref="Core.aslx" />
<game name="Disappearing Letters">
<gameid>ca3312b9-336c-4b9d-a76d-45d2c8896188</gameid>
<version>1.0</version>
<firstpublished>2015</firstpublished>
</game>
<object name="room">
<inherit name="editor_room" />
<alias>Bedroom</alias>
<description>A large room, dominated by a four-poster bed. A bay window overlooks the grounds.</description>
<object name="player">
<inherit name="editor_object" />
<inherit name="editor_player" />
</object>
<exit alias="south" to="drawing_room">
<inherit name="southdirection" />
</exit>
</object>
<object name="drawing_room">
<inherit name="editor_room" />
<description>The drawing room looks very elegant, the wall panelled in dark wood to match the chairs.</description>
<exit alias="north" to="room">
<inherit name="northdirection" />
</exit>
</object>
<command name="white">
<pattern>white</pattern>
<script>
JS.eval ("$('.lettera').css('color', 'white');")
</script>
</command>
<command name="black">
<pattern>black</pattern>
<script>
JS.eval ("$('.lettera').css('color', 'black');")
</script>
</command>
<function name="OutputText" parameters="text"><![CDATA[
data = NewDictionary()
dictionary add (data, "fulltext", text)
text = ProcessTextSection(text, data)
s = ""
in_tag = false
for (i, 1, LengthOf(text)) {
c = Mid(text, i, 1)
if (c = "<") {
in_tag = true
s = s + "<"
}
else if (c = ">") {
in_tag = false
s = s + ">"
}
else if (c = "a" and not in_tag) {
s = s + "<span class=\"lettera\">a</span>"
}
else if (c = "A" and not in_tag) {
s = s + "<span class=\"lettera\">A</span>"
}
else {
s = s + c
}
}
OutputTextRaw (s)
]]></function>
</asl>
For those interestyed in the details, for the JQuery and CSS, I use:
JS.eval ("$('.lettera').css('color', 'white');")
Usually we use a # before the idfentifier, but in the case I am changing a class of elements - the difference being you can have more than one element with the same class. Every letter "a" is of the class "lettera", so I used .lettera rather than #lettera.
To get the letters to disappear altogether you can use this instead:
JS.eval ("$('.lettera').css('display', 'none');")
And to get them back:
JS.eval ("$('.lettera').css('display', 'inline');")
Overriding OutputText turned out tobe more complicated than I was expecting because the text has "a"s in some HTML tags, and they were getting replaced too. I had to go throughthe string a character at a time and only change letter "a"s that were not in tags. This means you cannot use "<" or ">" in your text (except for HTML).