Flip Card in Few Lines of Code

[Mohammad]

This is a straightforward WikText for TiddlyWiki 5.3.0+ that creates a flexible grid of flip cards. You can adjust the dimensions in the included stylesheet. Remember to use backticks for the substituted attribute values.

\procedure stateTiddler() $:/temp/flipper-demo

\procedure card-actions()
 <$action-listops $tiddler=<<stateTiddler>> $index=<<idx>> $subfilter="+[toggle[clicked]]" />
\end

\procedure flip-card(front, back, idx)
<$button actions=<<card-actions>> tag=div class={{{ flip-container [<stateTiddler>getindex<idx>match[clicked]] :and[join[ ]] }}} >
    <div class="flipper">
      <div class="front"><$transclude $variable=front $mode=block /></div>
      <div class="back"><$transclude $variable=back $mode=block /></div>
    </div>
</$button>
\end

Example a

<div class="grid">
	<<flip-card "Card A" "Back A" idxA>>
	<<flip-card "Card B" "Back B" idxB>>	
</div>

Example b: Create an array of flip cards

<div class="grid">
<$list filter="A B C D E F G H" variable=n>
<$transclude $variable=flip-card front=`Card $(n)$ Front` back=`Back $(n)$` idx=`idx-$(n)$` />
</$list>
</div>

Demo and Code

• To give a try, download flip-card.json (2.0 KB)

• Drag and drop into https://tiddlywiki.com

• Open the “flipper-ii/demo” tiddler

• Click on any card you like

You can use different tiddlers to store card data for each side.

Screenshot

Special kudos to @saqimtiaz for his amazing work on substituted attribute values and the filter operation.

[Scott_Sauyet]

Wonderful!

I’ve seen a few other TW flip-card implementations. This looks to be the simplest, both in usage and in the code.

Thanks you for sharing!

[arunnbabu81]

This is awesome @Mohammad. Can the tiddler itself be flipped like this ?

[Mohammad]

I think so, but you might need to modify the core view templates (I don’t like it). Since a tiddler has other buttons, it could be a bit confusing. Just as a hint, I used a custom view template here to make only the tiddler body of all tiddlers tagged with card function like a flip card.

Create a view template tiddler as shown below (tag it with $:/tags/ViewTemplate).

\procedure stateTiddler() $:/temp/flipper-demo

\procedure card-actions()
 <$action-listops $tiddler=<<stateTiddler>> $index=<<idx>> $subfilter="+[toggle[clicked]]" />
\end

\procedure flip-card(front, back, idx)
<$button actions=<<card-actions>> tag=div class={{{ flip-container [<stateTiddler>getindex<idx>match[clicked]] :and[join[ ]] }}} >
    <div class="flipper">
      <div class="front"><$transclude $variable=front $mode=block /></div>
      <div class="back"><$transclude $variable=back $mode=block /></div>
    </div>
</$button>
\end


<$list filter="[all[current]tag[card]]">
<$transclude $variable="flip-card" front={{!!front}} back={{!!back}} idx=<<currentTiddler>> />
</$list>

You should make a small adjustment in the styles tiddler as shown below:

.flip-container {
    perspective: 800px;
    width: calc( 100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}) ; /* Adjust width */
    margin: 0 auto;
    height: 150px; /* Adjust height */
    cursor: pointer;
  }

I updated the story layout to “fluid-fixed,” and it’s working perfectly. Adjust the width and height to fill the entire body. You can use the .tc-tiddler-body selector class for all tiddlers tagged with card and make precise adjustments.

People with better knowledge of CSS might suggest a more visually appealing design here.

[arunnbabu81]

Thank you @Mohammad . I am using a custom layout with a custom viewtemplate cascade. So there is no need to overwrite core tiddlers. I will try when I am back on my desktop

[duarte.framos]

Damn! This would look fantastic for the hover effects of the Bento Grid layout we are trying to get going.

Proposal - HelloThere Tiddler Using a Card-like Style

Here are some initial mockups of how I’d envision bento grids for TiddlyWiki. A few considerations I felt more adequate: More pictorial approach - Bento layouts work better with some accompanying by graphical elements, even purely accessory. Itemized text - Messages should be less verbose, succinct and quick to parse. Walls of text look daunting and risk losing the audience. A centered main tile with a stronger color for the tag line/slogan A consistent color palette - TiddlyWiki.co…

[Sunny]

@Mohammad
Thank you for this very useful tool.
I am trying to adapt it, but obviously doing something wrong as it’s not working.
Could you please tell me where I’m going wrong.
I am trying to use fields {{!!english}} and {{!!spanish}} in tiddlers tagged ‘Spanish’ with a modified viewtemplate $:/_/my/templates/viewtemplate/flip-card-spanish.
The spanish demo tiddler is the problem, see here.
demo-tiddlers.json (9.1 KB)

Solved, wiki updated.
new-demo-tiddlers.json (9.0 KB)

[TiddlyTitch]

@Mohammad

This is a straightforward WikText for TiddlyWiki 5.3.0+ that creates a flexible grid of flip cards.

Simply nice. Nice and simple.

FYI, I have long used Un-Named’s flip cards.

Yours is easier because it is easier to see how it works and tweak it.

A good starting point to make flip-cards one’s own and be flipping-marvellous.

[TiddlyTitch]

@Mohammad

This is a straightforward WikText for TiddlyWiki 5.3.0+ that creates a flexible grid of flip cards.

@Mohammad IF in a flip I wanted to add sound to the transition how would I do that?

Possible?

For instance how to add the sonic motif: xxxx between cards? …

A: SHARK ATTACK
[sonic motif xxxx]
B: A perennial motif that arose in schlock horror movies about death at sea perpetrated by large sharp fanged fishes within the Selachii Division.
Shark attacks on humans are uncommon.

[Mohammad]

You can have a tiddler, in the text field you can embed the sound and check it to see if it works. then in the front field put the title or any text.
Now pass, text as back and front as front to flip card.
Note, flip card only transclude the fields, so it should work with any content.