One example application of posters intrigued me in @eastgate’s new book “Thinking With Tinderbox”: its use in generating front and back pages for a given note e.g. see page 205 of the book.
I see it as a great way of memorising information (say in preparing exams or an job interview), stimulating thought and organising information in new ways (for instance understanding what common birds look like first, then looking up information about them - another “Gedanken experiment” detailed in the book).
While the steps are I think relatively straightforward for seasoned TB users, I would love to see an example notebook created and circulated to this community learn more about using the poster functionality and adapt to my own needs. I feel uncertain of my own capabilities in this area. Tweaking an existing document, especially if there are some comments, I feel more comfortable with.
Would someone in this community be willing to take this up and provide such an example document and template ?
The Thinking with Tinderbox book pp.204–5 bulleted list describes the procedures. Making a generic poster is of limited use except to the export) as the functionality is in the web page. So a better way into this is to create or find a (freely copyable) web page and discuss its implementation. Otherwise, those helping are being given a very open-ended task.
The underlying genesis of posters was the realisation that a web browser in 2025, compared to 2000 (when Tinderbox was being designed), can do significantly more. So rather than engineer (significant dev cost) new views (each view is add’l cost) the app could facilitate using the web browser as a ‘view’ , within the context of a Tinderbox map. Indeed a mp might hold multiple such views.
So at p.205 what is described is essentially a flashcard repetition training mechanism. Rather than engineering a native Tinderbox flashcard view (i.e. like Map, Chart, etc.) with the cost-vs-ROI calculation (not all users will want/need it), a poster can fill the gap. How the (web page) flashcard functionality is implemented is a design choice left to the user: find/build a web page then configure as a poser. If it doesn’t work in the web browser, it can’t be implemented as a poster.
The Tinderbox end is making a poster note, but the real delivery is the design of the web page which is done outside Tinderbox. IOW, in order to know what to configure at the Tinderbox end you really need to have some idea of what you are implementing.
Eastgate kindly provided a TBX covering some of the broad issues (and including examples). There were various versions and the latest I can find is #5:Tinderbox Posters-5.tbx (848.5 KB). This isn’t written as a single-example explicit step-by-step but covers the broad implementation, the various Tinderbox settings.
Note to forum community: I think there ought to be a thread/post for the above demo but I can’t find one. If anyone knows of a such, i.e. not embedded in some other discussion, please DM me. Else, we need to make a point (post) of reference in the Posters section for easy cross reference in threads like this.
As to the wider point, hopefully someone with the skills and time will take up the closing challenge.
I’ve just finished the book (which I enjoyed a lot), and was also struck by the ‘memory card’ application.
I think I’m going to try to incorporate it into something I already do with my Journal. I write (part of) it in Welsh, purely as a language learning exercise – I’m very much a beginner – and I have a couple of routines to help with that.
Basically, I highlight a word, invoke a Keyboard Maestro macro, which then populates a zip link in the form [[headword (gender) | plural – English#pVocab::Any notes and copies it back over the word. All I have to do then is press]] and the vocab definition is created as a new note with the pVocab prototype. An agent then sweeps the new definition into the Vocab container. A couple of agents then give me the new definitions this week, and ten words at random to learn. When I use Preview/Export, all the vocab for the day is listed under the main text.
The Thinking with Tinderbox ‘memory card’ feature will fit in very nicely with this routine, but I haven’t got round to exploring the idea properly yet. (I too have never used Posters in anger…)
Your post has given me a nudge to see how to incorporate it…
… Think of a web page you know well. Imagine the page—the content window within your web browser—as the content of the visible face of a note in a Tinderbox map. That is a Tinderbox poster. The concept is that simple. the implementation, depending on one’s skills and patience can take a little more.
There isn’t a "Make a poster’ button. Likely there can’t be as web content varies so much. People’s ability to implement web page B based on a worked example of A will vary. a good starting point is the demo TBX above. If insufficient, articulating where the TBX doesn’t explain needed info will help scope the sort of resource needed to fill the gap.
Thanks @mwra also for resurrecting the examples. I understand conceptually the steps e.g.
Prototype the webpage you want displayed
Think of which parts of the webpage related to the various attributes of the note under consideration
Code the Template based on the elements of the note you would like to appear in the final webpage (e.g. where does $Text or $Name go for instance)
Make sure the note of interest refers to the Template
I fail on the html part. For the memory example I would be looking for the simplest solution possible which is using the note $Name as the question and the note $Text as the hidden answer with the a clickable link to show either the name or the text of the note.
I’m sorry if I’m stumped but this is what I’m looking for.
Here’s what I tried this morning, based on a vocabulary card, with Welsh as the ‘front’ and English as the back, as a proof of concept. It’s based on three main parts: the cards themselves, each with the prototype Poster, and a template tVocab in /Templates. It’s taken from the example in the Thinking with Tinderbox book.
It took me a while to work out what was going on, but I think I’ve got it working now… Minimal working example: Vocab test.tbx (326.9 KB)
Each card has two attributes ($LangWelsh and $LangEnglish), and has the prototype Poster (from the File > Built-in prototypes menu), which bequeaths the $PosterTemplate /Templates/tVocab to it.
The tVocab template is where most of the work is done. It’s basically in two parts:
between the <style> ... </style> tags: I took this from page 206 – this is the CSS style for what the card will look like. (You could put this into the text of another note and link to it but I’ve chosen just to put it in directly here.) The p block defines the general font and margins. The #Welsh and #English blocks are set initally to be visible and hidden, respectively.
between the <body> .... </body> tags. This is from page 207, and it tells Tinderbox what to display on the Poster in two blocks: one for the Welsh definition, and one for the English translation, taken from the card’s $LangWelsh and $LangEnglish attributes respectively. Because the CSS style initially hides the English block, you only see the Welsh block initially, together with a link which swaps round the visibility of the two blocks, hiding the Welsh and showing the English (by overriding the initial CSS settings in the <style> section)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>^title^</title>
<style>
p {
font-size: 3em;
margin-left: 5em;
margin-top: 3em;
margin-right: auto;
}
#Welsh {
display: block;
}
#English {
display: none;
}
</style>
</head>
<body>
<p id="Welsh">^value($LangWelsh)^
<br>
<br>
<a href="#" onclick="
let f = document.getElementById('Welsh');
f.style.display='none';
let b=document.getElementById('English');
b.style.display='block';
return false">Click for English</a></p>
<p id="English">^value($LangEnglish)^<br>
<br>
<a href="#" onclick="
let f = document.getElementById('English');
f.style.display='none';
let b=document.getElementById('Welsh');
b.style.display='block';
return false">Click for Welsh</a></p>
</body>
</html>
That’s basically it. It is very rough and ready, but it seems to work.
It should be relatively easy to adapt this beyond vocabulary to other memory purposes.
I only have a rudimentary understanding of how it all works, so I put this forward tentatively, but as it does seem to work, perhaps my example project will allow you to experiment?
OK, can you link to a web page showing the desired functionality? Then we can shim it (its design) into Tinderbox and explain the process. Building the whole HTML ‘view’ from the group up is a non-trivial task.
I ask as I don’t have personal knowledge of web-based flash-card systems. There may be lots out there, I just don’t know.
You’re welcome – I’d never thought this was possible till I read Thinking with Tinderbox, and your post gave me the nudge I needed to try it out, thanks. There’s a lot left to do to tidy it up, but I’m glad I can get the basics to work…
BTW, we discussed this back in January during a meetup. I’d developed a flip card demo that showed how the JavaScript template could be rendered in preview or as a “poster” in map view.
I think the key thing to remember is a poster is nothing more than a template being rendered in map view (I.e., the $PosterTempate attribute is set to the relevant template) v.s. $HTMLExportTemplate or $EmailTempalte being set to the same template or, as in my case, set to a different template.
Per my last note, I think it is important to not see this as a “poster” solution, but a “templating solution” that is used in different context, e.g., in map view, in preview, in general export, as an email template, etc. The foundation of posters is templates and feeding the javascript in these templates values from attributes.
I’ve updated this Creating new posters at aTbRef to better reflect that making a poster starts with having an useable version of the page with our own suitable data before attempting to make a poster.
Users may have noticed the demo TBX above has an issue† with the current (v10.1.2) release. this will be fixed in the next release at which time an improved version of that TBX will be given a page in the Automation/Poster sub-forum (i.e. this one!) in order to make it easier to find.
†. Link types can acquire an ever-growing set of quotes enclosing the original link type’s name. this is not intentional and a fix has already been tested.
]