How to add extra text with dropdown?

Authoring Twine
1

If you are requesting technical assistance with Twine, please specify:
Twine Version: Twine version 2.3.16
Story Format: Harlowe 3.2.3

Hello.

So, Is there a way to print out text once the player selects a dropdown option (without them needing to click on a link)?

This is my Passage so far:
(The variables and text are placeholders to illustrate better what I’m trying to accomplish)

(Set: $ColorList to (a: "yellow", "blue", "red"))

(dropdown: bind $DropdownColor, "Choose a Color", ...$ColorList)[

(link-rerun:"Color:")[(unless: $ColorList is "Choose a Color")[
You have chosen (link-rerun: '$DropdownColor')[
(if: $DropdownColor is "blue")[. "Ah, the color of the ocean"]
(if: $DropdownColor is "red")[. "The beautiful shades of fire"]
(if: $DropdownColor is "yellow")[. "Yellow like the sun"]] ]
]
]

(link:"Im Done")[(goto:"Somewhere else")]

In this cas, the player needs to click on the link “Color:” to get some text and a return of the DropdownColor variable

And I’m aiming for something like this or similar :

(Set: $ColorList to (a: "yellow", "blue", "red"))

(dropdown: bind $DropdownColor, "Choose a Color", ...$ColorList)[
(unless: $ColorList is "Choose a Color")[
(replace: ?ColorSelected)[
(print: $DropdownColor)]]

You have chosen: []<ColorSelected|
]

(link:"Im Done")[(goto:"Somewhere else")]

But even if the DropdownColor variable changes it’s value, it doesn’t return any text.
It doesn’t print the DropdownColor or replace the ColorSelected hook

My goal would be for the dropdown, once a value was selected, displays some text, or shows or replaces a hook, or gives any visual indication that the value was indeed changed.

Reasoning:
I’m making a test-game with magic and stuff, where a mage player can prepare a series of spells to fight enemies. I was going to use the dropdown macro to select a spell and then text would appear at the bottom with the description of the spell (this is what I’m trying to do). Then the player had the option to “>link: Prepare the spell” or “>link: Empty Spells Slots”

If the dropdown macro cant display any text and I’m just doing a wild goose chase please let me know.

(If doing something like-a-dropdown in CSS is easier to work with than the built-in dropdown macro please let me know as well)

Any help is appreciated

2

Harlowe doesn’t include the ability to monitor for the change events that occur when an item is selected in the HTML <select> element that the (dropdown:) macro generates.

And unfortunately Harlowe has been deliberately designed to limit an Author’s ability to use JavaScript to enhance the functionality of their project or of the Harlowe engine itself, so the normal Web Developer practice of adding an onchange event handler to achieve the outcome you want is more difficult than you would expect.

It is possible to use a timer based macro like (live:) to simulate a onchange like effect, however such a timer thread can interfere with the end-user’s ability to interact with the page.

The following is a variation of your own example that has been changed to use a (live:) macro to call a (rerun:) macro every 0.5 seconds, which in turn is used to reprocess the content of a Named Hook that contains the logic to display the correct message for the item selected in the dropdown. I have changed the Array variable to be Temporary because there is no indication that that variable is used later in the project.

(set: _ColorList to (a: "yellow", "blue", "red"))\
(dropdown: bind $DropdownColor, "Choose a Color", ..._ColorList)

|outcome>[{
	(unless: $DropdownColor is "Choose a Color")[
		You have chosen
		(if: $DropdownColor is "blue")[. "Ah, the color of the ocean"]
		(else-if: $DropdownColor is "red")[. "The beautiful shades of fire"]
		(else:)[. "Yellow like the sun"]
	]
}]

(link-goto: "Im Done", "Somewhere else")

(live: 500ms)[(rerun: ?outcome)]