Help on translating a virtual stack of cards to wikitext needed...

[Jan]

Hi Fans of skeumorph (https://en.wikipedia.org/wiki/Skeuomorph) design.

When trying to enhance my quizcard macro I stumbled upon this codepen
https://codepen.io/miroot/pen/YXpOGG

The html and css already work in TW http://szen.io/quiz/#Quiz%20Cardstack .
So far I failed trying to translate the syntax to wikitext because the
radio input makes use of IDs.

How can I solve this with the radiowidget?

Best wishes Jan

[TW Tones]

Jan,

Interesting word skeumorph. 

No answer but some thoughts that may help

My HTML/CSS skills have improved working with TiddlyWiki however perhaps not enough to resolve this example.

• I am confident however when it comes to copying the behaviour of your example native tiddlywiki/wikitext will be much simpler and less verbose, although as you have demonstrated the CSS output is working to some extent.
• When depending wholly on html and css the answer given by the user may not be stored persistently
  
• If you look at the syntax you can see how the result is stored in an index, a "tiddlywiki object" and similarly the rest of your  solution needs to respond to the value used in tiddlywiki
• As you have identified the key is to get persistent storage of the value.

Perhaps you can use a reveal to only use part of the styling or html when the selected value is given by a tiddlywiki radio  widget.

Best of luck

Tones

[c pa]

The tiddlywiki way is to have the radio buttons set a value into a field and then display the corresponding card based on the field being populated

Pseudo code:

<$radio tiddler=<<currentTiddler>> field="card-state" value="Card-1">Card 1 </$radio>

<$radio tiddler=<<currentTiddler>> field="card-state" value="Card-2">Card 2 </$radio>

<$radio tiddler=<<currentTiddler>> field="card-state" value="Card-3">Card 3 </$radio>

<$reveal type="match" state="!!card-state" value="Card-1">

Card 1 content

</$reveal>

<$reveal type="match" state="!!card-state" value="Card-2">

Card 2 content

</$reveal>

<$reveal type="match" state="!!card-state" value="Card-3">

Card 3 content

</$reveal>

[TW Tones]

I will add, the radio widget could be placed inside a list widget and replace the value and label programaticaly. 

Then the card names can be found programaticaly,. such as with a tag etc...

I have not tested this recently but believe it would work. 

Tones

[Jan]

Hi,
thanks for the syntax of the radio-widget... the problem is to match the css to the html-elements produced by this syntax.
Because I want the cards to be animated, I have to do the transformation without the reveal-widget.

Sorry for not answering sooner... I felt several times close to the result...

Best Wishes Jan

P.S. Reveal uses "text" instead of "value".

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/9cedf255-a283-466b-8822-5e3f185f0155n%40googlegroups.com.