Show case yet another flashcard feature in Tiddlywiki

[daretobelieve]

Hi

Continuing my small project in other topic, I want to show my small project to create simple flashcards in Tiddlywiki. Below is the screenshot what I have done for creating flashcard that fits my daily flow.

So let’s say I have a source tiddler like below and I want to create flashcard from a paragraph in that tiddler

I blocked the paragraph and hit the excise button, write the title for the new tiddler and choose flashcard option which I have added by writing new code. Hit the “perform excision” button.

After that TW will create automatically 1 new tiddler answer and 1 new tiddler question. The title prefix “Question …” and “Answer …” are added automatically so you don’t need to write the prefix again. The source tiddler will have a new translink transclusion from the tiddler answer. The tiddler answer will have a reference link to the source tiddler. The question tiddler will have 3 buttons : show the answer, hide the answer, and the source tiddler link. Just hit the ref button and you can go back to the source tiddler.

I do realize I need to add a lot of other feature to fit the space repetition (SRS) concept. Due to technical limitation, I am not good enough in coding, I am aiming to enhance step by step. Meanwhile for that, I would like to ask advice from this TW forum to give perfection for this flashcard feature.

Many thanks before
Fendy

[linonetwo]

Seems you’ve created a card-making feature? If you want to make created card have SRS, you can add ? tag to it, and it automatically become an in-wiki flash card by tidme plugin.

[daretobelieve]

Hi @linonetwo,

Yes I am making flashcard automation. I am aware of the tidme plugin and Tiddlyremember plugin but I choose to make my own flash card that suits my daily work flow. I have succeeded to make my own flash card solution by tweaking excise menu, so I want to show in this discussion forum to gather feedback and input.

Many thanks before
Sincerely yours

[TW_Tones]

How can we get your solution @daretobelieve

Thanks for your contribution. Good Work

[daretobelieve]

Hi

Sorry late to reply. I don’t make any plugin so I need to explain step by step

Add flashcard option in excise drop down menu

1. Make a new tiddler with the title $:/language/Buttons/Excise/Caption/Replace/Flashcard
2. Insert “flashcard” in the body of the tiddler. You can type any kind of text as you wish “Flash Card”, “FlashCard”, etc. It will appear in the excise drop down menu option exactly what you write down.
3. Open $:/core/ui/EditorToolbar/excise-dropdown
4. Add <option value="flashcard"><<lingo Caption/Replace/Flashcard>></option> below the option value macro, see the code below. This code will show flashcard option in menu excise drop down

<<lingo Caption/Replace>>&#32;<$select tiddler="""$config-title$/type""" default="transclude">
<option value="link"><<lingo Caption/Replace/Link>></option>
<option value="transclude"><<lingo Caption/Replace/Transclusion>></option>
<option value="macro"><<lingo Caption/Replace/Macro>></option>
<option value="flashcard"><<lingo Caption/Replace/Flashcard>></option>
</$select>

5. Add this code below the widget reveal for macro or above the <$button>. This will activate macro option when you click “flachcard” option. You can choose anykind of macro you like but I stick to use translink macro as it is.

<$reveal state="""$config-title$/type""" type="match" text="flashcard">
<<lingo Caption/MacroName>>&#32;<$edit-text tag="input" tiddler="""$config-title$/macro-title""" default="translink"/>
</$reveal>

To be continued in below post

[daretobelieve]

Instruct the excise.js to create question and answer tiddler if we click “perform excision” in excision drop down menu

1. Remember to back up all of your tiddler
2. Open the $:/core/modules/editor/operations/text/excise.js
3. I suggest to cut all the content and paste in somewhere else so you will have backup if something goes wrong
4. Paste below code to replace the excise.js content

/*\
title: $:/core/modules/editor/operations/text/excise.js
type: application/javascript
module-type: texteditoroperation

Text editor operation to excise the selection to a new tiddler

\*/
(function(){

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

exports["excise"] = function(event,operation) {
	var editTiddler = this.wiki.getTiddler(this.editTitle),
		editTiddlerTitle = this.editTitle;
	if(editTiddler && editTiddler.fields["draft.of"]) {
		editTiddlerTitle = editTiddler.fields["draft.of"];
	}
	var excisionTitle = event.paramObject.title || this.wiki.generateNewTitle("New Excision");
switch(event.paramObject.type || "transclude") {
	   case "flashcard":
	   this.wiki.addTiddler(new $tw.Tiddler(
	   this.wiki.getCreationFields(),
this.wiki.getModificationFields(),
     {
		    title: "Answer "+excisionTitle,
            tags:"flashcard",
            text: operation.selection + " [[Ref|"+editTiddlerTitle+"]]"
      }
                                      ));
       this.wiki.addTiddler(new $tw.Tiddler(
	   this.wiki.getCreationFields(),
this.wiki.getModificationFields(),
     {
		    title: "Question "+excisionTitle,
            text: "{{Answer " + excisionTitle + "||Flashcard template}}",
            tags:"flashcard"
      }
                                      ));
break;

         case "transclude": 
         case "link":
         case "macro":
         this.wiki.addTiddler(new $tw.Tiddler(
         this.wiki.getCreationFields(),
		 this.wiki.getModificationFields(),
     {
		    title: excisionTitle,
            text: operation.selection,
            tags: event.paramObject.tagnew === "yes" ?  [editTiddlerTitle] : []
      }
                                      ));
break;

}
	operation.replacement = excisionTitle;
		switch(event.paramObject.type || "transclude") {
		case "transclude":
			operation.replacement = "{{" + operation.replacement+ "}}";
			break;
    	case "link":
			operation.replacement = "[[" + operation.replacement+ "]]";
			break;
		case "macro":
		operation.replacement = "<<" + (event.paramObject.macro || "translink") + " \"\"\"" + operation.replacement + "\"\"\">>";
			break;
         case "flashcard":
         operation.replacement = "Answer "+ excisionTitle;
		 operation.replacement = "<<" + (event.paramObject.macro || "translink") + " \"\"\"" + operation.replacement + "\"\"\">>";
			break;	
}
	operation.cutStart = operation.selStart;
	operation.cutEnd = operation.selEnd;
	operation.newSelStart = operation.selStart;
	operation.newSelEnd = operation.selStart + operation.replacement.length;
};

})();

The explanation of above code can be interpreted step by step as below

Make a new tiddler for answer in flashcard with the predefined field

case "flashcard":
	   this.wiki.addTiddler(new $tw.Tiddler(
	   this.wiki.getCreationFields(),
this.wiki.getModificationFields(),
     {
		    title: "Answer "+excisionTitle,
            tags:"flashcard",
            text: operation.selection + " [[Ref|"+editTiddlerTitle+"]]"
      }
                                      ));

1. For me I like to have tiddler with the title “Answer …”+excisionTitle. The excisionTitle (see below) will refer to the input text you type in excise dropdown menu > “Title of new tiddler”. So for example I type the title “What is the meaning of tiddler?” in excise dropdown menu, excise.js will create the new tiddler with the title “Answer What is the meaning of tiddler?”. You can play with your own preference with the title

2. For the answer tiddler tags, just insert your own preference. Here I use tags: “flashcard” so the new answer tiddler will have predefined tag “flashcard”
3. For the text area in answer tiddler, I write text: operation.selection + " [[Ref|"+editTiddlerTitle+"]]" . It means that the text in answer tiddler will have operation.selection which refers to the text that I want to excise from the source tiddler. At the end of that excised text, I want to have a word Ref which will direct me to the source tiddler. You can remove the + " [[Ref|"+editTiddlerTitle+"]]" if you feel you don’t need to know the source tiddler.

Make a new tiddler for question in flashcard with the predefined field

this.wiki.addTiddler(new $tw.Tiddler(
	   this.wiki.getCreationFields(),
this.wiki.getModificationFields(),
     {
		    title: "Question "+excisionTitle,
            text: "{{Answer " + excisionTitle + "||Flashcard template}}",
            tags:"flashcard"
      }
                                      ));

1. For me I like to have tiddler with the title “Question …”+excisionTitle. The excisionTitle will refer to the input text you type in excise dropdown menu. So for example I type the title “What is the meaning of tiddler?” in excise dropdown menu, excise.js will create the new tiddler with the title “Answer What is the meaning of tiddler?”. You can play with your own preference with the title
2. For the question tiddler tags, just insert your own preference. Here I use tags: “flashcard” so the new answer tiddler will have predefined tag “flashcard”. You can use tags like “flashcard question”, “question”, etc as you like
3. For the text area, I use this code text: "{{Answer " + excisionTitle + "||Flashcard template}}". Using above example, It will write down {{Answer What is the meaning of tiddler?||Flashcard template}} in the text area of question tiddler. It will transclude the answer tiddler content into flashcard template and it will appear in question tiddler.

Last but not least, the translink macro in source tiddler

case "flashcard":
         operation.replacement = "Answer "+ excisionTitle;
		 operation.replacement = "<<" + (event.paramObject.macro || "translink") + " \"\"\"" + operation.replacement + "\"\"\">>";
			break;	

The meaning of above code

In the source tiddler, replace (see below) the excised text with macro translink that directs you to the Answer Tiddler. If you have other kind macro you like, just change this part.

Reload your TW to activate the new excise.js

To be continued in below post

[daretobelieve]

Make the Question show and hide button

1. Create new tiddler with the title “Flashcard template”
2. If you use other title, remember that you need to change the question tiddler part in excise.js with your new title
3. Paste below code in the “Flashcard template”

<$button set=<<qualify "$:/state/Flashcard template">> setTo="show">Show</$button>
<$button set=<<qualify "$:/state/Flashcard template">> setTo="hide">Hide</$button>
 
<$reveal type="match" state=<<qualify "$:/state/Flashcard template">> text="show">

{{!!text}}

</$reveal>

• The code will transclude the text field in the answer tiddler when you hit the show button.
• I use qualify "$:/state/Flashcard template" so that when I open several question tiddler, if I click Show button in one of tiddler, the other question tiddler will remain hiding the answer.
• You can use whatever button title you wish. Here I use “show” and “hide”

Thank you for @EricShulman for helping cleaning my code in excise.js and @TW_tones for supporting this topic.

Sincerely yours

[daretobelieve]

Small improvement

When we open Question Tiddler and click Show to show the answer, then we close the tiddler and reopen again, the Question tiddler still show the answer. This is because the state of the show button still there. So today I make a small improvement so that after we close the question tiddler, it will still in the hide state.

1. Open $:/core/ui/Buttons/close
2. Add below code before the </button>

<$action-deletetiddler $filter='[prefix[$:/state/Flashcard template]]'/>

So everytime we close the question tiddler, it will also delete the state of Flashcard template. If you use other name for the state, you can modify the action-deletetiddler code above to match your naming.