A slider which closes itself when clicking elsewhere or closing tiddler

[passingby]

I am trying to make a small quiz for myself in which a question is followed by its answer hidden in a slider.

I have looked at Stephen Hradek's solution using CSS but I shall be using my TW on a mobile and hence the hovering thing does not work too well. I find myself selecting tiddler text again and again while trying to reveal content. don't want that. 

What I want is that content should be revealed upon a click, preferably a button. And that it should close itself when I close the tiddler so that next time I open the tiddler again the content should be hidden by default.

This is similar to the tiddler info panel which after opening closes itself upon a click anywhere else and is also closed by default when the tiddler is opened again after closing.

Any ideas?

[ste...@gmail.com]

Hi,

On Monday, February 19, 2018 at 7:58:01 PM UTC+1, passingby wrote:

What I want is that content should be revealed upon a click, preferably a button. And that it should close itself when I close the tiddler so that next time I open the tiddler again the content should be hidden by default.

This is similar to the tiddler info panel which after opening closes itself upon a click anywhere else and is also closed by default when the tiddler is opened again after closing. 

 

Since nobody else has answered, here are two quick "hacks" that might help, even if they aren't exactly what you requested and are quite certainly not "polished" enough for a public wiki:

1.) Add the answer to the "Info" panel itself:

<$button>

<$action-listops $tiddler="Display Answer" $tags="+[append[$:/tags/TiddlerInfo]]"/>

<$action-setfield $tiddler="Display Answer" caption="Answer"/>

<$action-setfield $tiddler="Display Answer" text="{{!!answer}}"/>

<$action-setfield $tiddler="$:/config/TiddlerInfo/Default" text="Display Answer"/>

<$action-setfield $tiddler="$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/info" text="show"/>

Make Changes

</$button>

After executing this code, you can reveal any content from the "answer" field of an individual tiddler by clicking its "Info" button. Disadvantage: The "Answer" tab will appear in Info panels of tiddlers that aren't part of the quiz, too. 

2.) Use a modal to display the answers: https://tiddlywiki.com/#WidgetMessage%3A%20tm-modal

Using a modal might not be the prettiest solution, but it is simple and straightforward.

Cheers,

Stef 

[Stephan Hradek]

I do not know, how far you followed my example, but an easy trick, with HTML5 enabled browser is:

1. instead of @@.answer @@ put around the answers

<p contenteditable="true" class="answer">
answerhere
</p>

2. change the "hover" in the CSS to "focus"

Now when you click on the anwer, it will get focus, and will be displayed.

You will be able to edit the answer, but this won't be stored. after closing and reopening the tiddler, the correct answer will reappear.

[Andreas Hahn]

Hi,

just to add onto all the tips you have already gotten: The info tab uses the button popup mechanism to get the behaviour that you want, so an example would be this (taken from the documentation at [1]):

<$button popup="$:/SamplePopupState">Open Answer</$button>

<$reveal type="nomatch" text="" state="$:/SamplePopupState">

! This is the Answer
1+1 = 2 most of the time :o

</$reveal>

/Andreas

[1] https://tiddlywiki.com/#RevealWidget

[ste...@gmail.com]

Hi Andreas,

On Wednesday, February 21, 2018 at 11:45:59 AM UTC+1, Andreas Hahn wrote:

Hi,

just to add onto all the tips you have already gotten: The info tab uses the button popup mechanism to get the behaviour that you want, so an example would be this (taken from the documentation at [1]):

This, of course, makes much more sense than my suggestions (at least in this particular case). For some reason, I hadn't been aware of this feature of the reveal widget.

Cheers,

Stef

[passingby]

Friends 

I am really sorry i got busy and made no progress on the issue. Maybe this weekend. I shall update if i get something done. 

Thank you for your suggestions/

[Steven Schneider]

Another alternative: use the <$appear> plugin by tobibeer

[passingby]

On Friday, February 23, 2018 at 12:25:55 PM UTC-7, Steven Schneider wrote:

Another alternative: use the <$appear> plugin by tobibeer

Thank you for know about tobi's plugin. I tried it out and it seems it will serve the purpose well. Thanks!