TiddlyWiki and Canvas

#1

Hello!

I’ve got a TiddlyWiki basically ready to go. I’ve been getting a lot of great help from @Emily on the Discord forum, and she suggested I come ove rhere to talk to @Springer because they have done a lot of work with sharing TiddlyWiki’s in their LMS and student proofing them.

I’m planning to use an iFrame to embed it in an Assignment page, but I need to remove the ability to look like it can be edited first. I’ll be hosting it on the Canvas files as well. I know it works, because I tested it on a little baby Tiddly Wiki, but now I need to try the real thing.

Any tips for a teacher would be very helpful.

Thank you!

#2

I’ve very happily used Reader Mode from @Mohammad’s Utility 2.6.1 — utility kit for authors and developers.

I usually tweak it, adding a startup action to run in Reader mode if the wiki is not served over Node.

I have no idea what Canvas is in this context. (I thought this was a very different type of question!)

2 Likes
#3

Hi @PhillipsSS – glad to have you here!

Yes, making reader-mode tweaks is essential, if you want your tiddlywiki to serve as a useful online resource without getting students confused by the editing interface.

I have the solution mentioned above by @Mohammad (part of the Utility plugin), but I also use this bit of read-only css wizardry by telumire.

In addition to having these interface tweaks, you may want to have the prevent-edit plugin from @linonetwo (so that students don’t get a “Leave page? Changes may not be saved…” type alert when they navigate away).

Depending on the details of your project, your read-only css needs may vary. For example, I need to make css adjustments so that the edit tool doesn’t get displayed on dynamic tables.

I find it convenient to have the following simple css class available in read-only mode:

.author-note {display:none;}

This enables me to toss <span class="author-note"> … </span> tags around something that I realize I want to see in my workflow, but which shouldn’t show up for students. Add more styling if you want it to jump out at you visually. (Obviously, this css class can also be invoked at the <div> level, or can be used inline as `@@.author-note GOTTA-ADJUST-THIS-PART-AFTER-MIDTERM @@. You can even assign it as the class field of any tiddler that you don’t want to display directly for students, like your to-do-list tiddler for improving the wiki. Its title will still appear in certain lists, though, unless you do further work to hide the title.)

I don’t know canvas, but there may well be some functions analogous to the student-specific iframe customizations that I’ve recently enabled, on moodle, through the generico plugin.

Feel free to share more specific questions as you develop your solution.

#4

You can also create a custom element:

<!-- Hide some stuff -->
<hide>
Stuff you want hidden.
</hide>


/* css */
hide { display:none; }

Purists (and the HTML spec, I believe) want you to hyphenate custom elements, so…

<springer-hide> ... </springer-hide>

Or

<my-hide> / <x-hide>

or whatever…

The benefit of your approach (the class attribute approach) is you can apply it to anything. You can also “compute it” based on the current host etc.

1 Like
#5

For the record I have also referred to these as arbitary html tags. Not only can they be used to apply css to a block or inline you can use them to organise content by describing them.

  • I have a tool to quickly apply saved or new tags in the editor toolbar
  • I have also researched being able to search for and or extract their content. Yet to be polished and made robust especialy with nesting.

Eg

  • quote-box
  • abstract
  • preview
  • more
  • section-heading
1 Like
#6

In this case, Canvas is the LMS that my students use to access materials. It’s put out by Instructure. They have some weird restrictions for built in HTML and CSS, which is how I started diving into TiddlyWiki.

Telumire is on the Discord, and both he and Emily are helping me with that first solution. I think that one will be a great starting point for me.

I hadn’t seen this second one. Will the pop up still occur if the TiddlyWiki is embedded? They shouldn’t ever see them stand alone in how it’s planned out in my head. I also really like the idea of the author-note, but I’m not sure how I would use that right now.

@TW_Tones, This looks interesting, and I can definitely see uses for this.

Thank you all for your replies. I’m curious about how many use TiddlyWiki for education and look forward to exploring it more.

1 Like
#7

Yes, if students do anything that TiddlyWiki expects to save (including various system state tiddlers – story river order, sidebar tab choice, etc.), then even an iframe-loaded version tosses up the alert in some circumstances.

Of course, you could go through and try to make sure all those state-tiddler “changes” are tracked only in temporary tiddlers, but the plugin is a much more foolproof way of removing that distracting alert.

#8

You may not have occasion for it.

<tl;dr> My tiddlywiki is a rambling mansion — my external brain. </tl;dr>

My main teaching TiddlyWiki started out living on my laptop as my projected screen during class sessions in 2005 or so. It was a TiddlyWiki Classic file living on my own computer, and during its early years students saw it only through the experience of my “guided tours” through material for a given classroom session. So, I packed in lots of planning and info and resources that functioned as my own pedagogical toolkit.

Even for the student-directed material, some of what’s along for the ride is stuff I expect to show during future classroom sessions but which I don’t want to reveal prior to that particular class activity. And it also houses a growing archive of questions and info on readings that are not part of the current syllabus but may be reactivated in the future, etc.

At some point years ago, a student realized that my improvisational Anti-PowerPoint was being displayed via a browser interface, and asked if my site was online as a study aid. I had already made the move to tiddlyspot by then. So I decided to “clean up” the interface a bit (deleting or hiding lots of riff-raff, but not the editing interface). I distributed the tiddlyspot link so that students could browse more or less freely, with the explicit caveat that I hadn’t really curated things carefully, and they might stumble into the guts of the wiki interface if they weren’t careful. (At that point, I had no important student-specific data there.)

It’s only with in the last two years that I’ve put together the steps to (1) house the iframe (now served via tiddlyhost) on moodle (since they had to log in at moodle for other assignment purposes anyway, and it never felt right to explicitly “send them” to an off-campus link); (2) automatically hide editing and system-tiddler GUI elements (much easier with TW5!) whenever the wiki was not being accessed via tiddlyhost login, and (3) integrate significant student-specific info into the TiddlyWiki interface.

This is all to provide background on how my site is like a very “lived-in” home with closets, a basement, an attic, etc. It has whole tiddler-neighborhoods that are not relevant or helpful to my current students at all (in addition to tiddler-neighborhoods that are relevant to some students and not others).

If your site is freshly designed from the ground up for direct student browsing through a single “front door” – and it’s not where you do your own course prep, and it’s not how you queue up possible avenues for classroom explanations and activities, etc. – then you probably will not need so many tools for tucking stuff out of view!

-Springer

1 Like