The other day, there was a post in the Twine community on G+ asking if anyone knew of a macro to keep track of tasks and then be able to mark them off. Since I was up early, which is something that has been happening more often lately, I thought I’d try to implement it myself. About 30 minutes later, I had posted my solution.

The major change between this and the one I originally posted is some additional CSS instead of setting style manually. It’s what I meant to add the first time, but left it up to other authors to change themselves.

:: Start
<<makeQuests>> 
<<addQuest "Feed Chickens">> 
<<removeQuest "Feed Chickens">> 
<<addQuest "Water the lawn">> 
<<removeQuest "Water the lawn">> 
<<addQuest "Milk the cow">> 
<<addQuest "Get the mail">>

:: script [script]
(function(){ 

if ( !Array.prototype.forEach ) { 
 Array.prototype.forEach = function(fn, scope) { 
 for(var i = 0, len = this.length; i < len; ++i) { 
 fn.call(scope, this[i], i, this); 
 } 
 } 
} 

var Quest_array = []; 

function addQuestDiv() 
{ 
 var el = document.createElement("div"); 
 el.id = "Quest"; 
 document.body.appendChild(el); 
} 
function updateQuest() 
{ 
 $("Quest").innerHTML = ""; 
 Quest_array.forEach(function(element,index,array) { 
 if(element[1] === true) { 
 $("Quest").innerHTML += "<p style='text-decoration:line-through; color: black;'>" + element[0] + "</p>"; 
 } 
 else { 
 $("Quest").innerHTML += "<p>" + element[0] + "</p>"; 
 } 
 }); 
} 

macros['makeQuests'] = {handler: function() { addQuestDiv(); } } 

macros['addQuest'] = { 
 handler: function (place, object, parameters) { 
 Quest_array.push([parameters[0], false]); 
 updateQuest(); 
 } 
} 
macros['removeQuest'] = { 
 handler: function (place, object, parameters) { 
 Quest_array.forEach(function(element,index,array) { 
 if(parameters[0] === element[0]) 
 element[1] = true; 
 }); 
 updateQuest(); 
 } 
} 
}());

:: style [stylesheet]

#Quest { 
 position: fixed;
 top: 60px; 
 right: 0px;
 background: #707070;
 width: 120px; 
 padding: 10px;
 font-size: 1.2em;
 color: #ff9900;
 border: 2px solid grey;
 -moz-border-radius: 8px;
 border-radius: 8px;
}