Hiding/Showing part of a tiddler when transcluded with widget

[welford]

Hello,

I've written a little widget that schedules tiddlers to be reviewed in a "Spaced Repetition" manner.

Rather than show the whole tiddler on review i'd like to show a section of it that I can mark as a question, then you can click show anwser or something and have it show the whole tiddler. e.g.

And in the case where i render the tiddler normally in the story river (or transcluded in another tiddler), just have it display without the question marked section. Is there some tiddlwyiki like way i can achieve this? in my current w3idget i could manually scan for the <$question> block and display that, but that wouldn't solve the general case where i don't want to to show the question section normally - in that case do i just write a widget that simply hides it's contents for the scheduling widget to pick up?

Thanks for any suggestions,
James

[saqimtiaz]

Wrapping your question in a list widget along the lines of the following should hide it when displayed directly in the story river:

<$list filter="[<currentTiddler>match<storyTiddler>]">
....question...
</$list>

Alternatively have CSS that hides the questions by default, and then your scheduling widget adds a class that makes them visible.

[welford]

<$list filter="[<currentTiddler>match<storyTiddler>]">
....question...
</$list>

would this work in the case where transcluded the article in another one? e.g. outside of the scheduling widget..

[welford]

I went with a widget that exists alongside my scheduling one as I proposed above. However i'm stumped on how to get the contents of a widget to render as thought hey were wiki text. the output it just plain text :

It seems that this is an issue even with the default widget render function. Is there a way to get this to render like wiki text?

created: 20210502165510840
modified: 20210502165528840
twsr_interval: 20210504165528840
tags: fruit
title: banana

{{||template_example}}

created: 20210502165510840
modified: 20210502165528840
title: template_example

| !transcluded title|  <$list filter="[list[!!title]]"><$view field="title"/> </$list> |

<$question>
!<$list filter="[list[!!title]]"><$view field="title"/></$list>
!!<$list filter="[list[!!title]]"><$view field="title"/></$list>
!!!<$list filter="[list[!!title]]"><$view field="title"/></$list>
#<$list filter="[list[!!title]]"><$view field="title"/></$list>
#<$list filter="[list[!!title]]"><$view field="title"/></$list>?
</$question>

[saqimtiaz]

Can you please post the code for your widget?

[welford]

sure

(function(){
    /*jslint node: true, browser: true */
    /*global $tw: false */
    //"use strict";

    var TWSRQuestion = function(parseTreeNode,options) {
    	this.initialise(parseTreeNode, options);
    };

    //Inherit from the base widget class
    TWSRQuestion.prototype = new Widget();
    exports.question = TWSRQuestion;
})();

in the example posted i'm just using the default widget render function

[welford]

without any of the transclusion, it still renders as plaint text:

[saqimtiaz]

There are a few potential issues:

• If that is the entirety of your code, it definitely is not being executed as otherwise you would get a Widget not defined error. You need to require $:/core/modules/widgets/widget.js. See one of the existing widgets like button.js in the core for an example.
• are you setting the module-type field of the widget to widget?
• Try the following:

<$question>

!one

</$question>

Without the leading and trailing newline the parsing is in inline mode, and therefore the wikitext for headers wont be applied.

[welford]

It's not the entireity, i just cut off the start stuff as thats usually all the same.

/*\
title: $:/plugins/welford/twsr/twsr.js
type: application/javascript
module-type: widget

twsr widget
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
//"use strict";

[welford]

Try the following:
<$question>

!one

</$question>

This was the issue!

Thanks

[welford]

code here: https://github.com/welford/twsr
example here: http://welford.github.io/kanji.html

I went with a second tiddler that exists in the same space as my "reveal answer"/scheduling plugin. The scheduling plugin has a couple of globals (g_showAnswer, g_questionElm) that when set can be filled by the barebones Question plugin (see code below) and rendered by the scheduling plugin.

var TWSRQuestion = function(parseTreeNode,options) {
	this.initialise(parseTreeNode, options);
};

//Inherit from the base widget class
TWSRQuestion.prototype = new Widget();

/*
Render this widget into the DOM
*/
TWSRQuestion.prototype.render = function(parent,nextSibling) {
	if(g_showAnswer){
		g_questionElm = this.document.createElement("div");
		Widget.prototype.render.call(this, g_questionElm, nextSibling);
	}
};

exports.twsr = TWSRWidget;
exports.question = TWSRQuestion;

Thank you for all the help @saqimtiaz !