Achievement Diary Filtering

[TheeBOBJohnson]

It would be nice while I'm working through achievements, I can mark completed tasks as done, and have them be hidden.

 

I've recreated the Easy Tasks for the Varrock Achievement Diary, please see http://www.b-o-b.org/VarrockAchievementDiary.html (this is my own personal site, and the linked page is only to demonstrate what I mean).

 

Some key things to look at on the above page:

 

• If you click a checkbox next to a task, it disappears.
  
• If you click the "Show" link at the top of the page, the hidden tasks reappear.
  
• If you click the "Hide" link at the top, all rows where the checkbox is checked become hidden again.
  
• Please note that all the javascript on the above page (and illustrated below) is created by me for use on tip.it (if the developers here would like to use it)
  

 

In the header section:

<script language="JavaScript" type="text/javascript">
<!--
// Start of with completed being hidden;
var boolHiddenArray = new Array();
boolHiddenArray["E"] = true;
boolHiddenArray["M"] = true;
boolHiddenArray["H"] = true;

function updateComplete(group, task)
{
	// If we aren't hiding the completed tasks for the selected group, then exit;
	if (!boolHiddenArray[group]) return;

	var chkTask = document.getElementById('chk' + group + task);

	// Make sure the checkbox isn't null before working with it;
	if (chkTask != null)
	{
		// We only care if it is checked;
		if (chkTask.checked)
		{
			var reqTask = document.getElementById('taskReq' + group + task);
			var ansTask = document.getElementById('taskAns' + group + task);

			// Make sure the corresponding rows aren't null before we try to hide them;
			if (reqTask != null)
				reqTask.style.display = "none";

			if (ansTask != null)
				ansTask.style.display = "none";
		}
	}
}

function hideTasks(group, hide)
{
	boolHiddenArray[group] = hide;

	var frmTask = document.getElementById('tasks' + group);

	// Make sure the form for the selected group of tasks isn't null before working with it;
	if (frmTask != null)
	{
		// Loop through all the elements in the form;
		for (var i = 0; i < frmTask.elements.length; i++)
		{
			// Make sure we are only dealing with checkboxes;
			if (frmTask.elements[i].type != "checkbox") continue;

			// Try to get the task index value from the name of the element;
			task = frmTask.elements[i].name.replace(/\D/g, '');

			// Make sure what we are working with is a number, and is greater than zero (all indexes for tasks start at 1);
			if (!isNaN(task) && task > 0)
			{
				var chkTask = document.getElementById('chk' + group + task);
				var reqTask = document.getElementById('taskReq' + group + task);
				var ansTask = document.getElementById('taskAns' + group + task);

				// Make sure all html elements we want to work with aren't null before changing them;
				if (chkTask != null && reqTask != null && ansTask != null)
				{
					// If we are hiding the selected group, then we have to see if the checkbox is checked;
					// else we can just display it (we don't care if checkbox is checked);
					if (boolHiddenArray[group])
					{
						if (chkTask.checked)
						{
							reqTask.style.display = "none";
							ansTask.style.display = "none";
						}
					}
					else
					{
						reqTask.style.display = "table-row";
						ansTask.style.display = "table-row";
					}
				}
			}
		}
	}
}
// -->
</script>

 

Some key things to note about the above javascript:

• The boolHiddenArray is to accommodate hiding/display individual sets of tasks (E = Easy, M = Medium, H = Hard).
  
• If a value in the boolHiddenArray is true that means the completed tasks in that group should be hidden (and false is everything is displayed).
  
• The function updateComplete takes 2 arguments: group & task. Group is a single letter corresponding E, M, and H. Task is an integer index starting at 1.
  
• The function hideTasks also takes 2 arguments: group & hide. Group is the same as before (E, M, and H). Hide is a boolean value - true means to hide tasks, false means to display the group of tasks.
  

 

Now the modified HTML code:

<form id="tasksE" name="tasksE">

<table>
<tr class="header">
<td width="5%">Complete</td>
</tr>

<tr id="taskReqE1">
<td rowspan="2"><input type="checkbox" id="chkE1" name="chkE1" onclick="javascript: updateComplete('E', '1');" /></td>
<td>E1</td>
<td>E1</td>
<td width="50%"><b>Have Thessalia show you what outfits you can wear.</b></td>

<td width="25%"><i>None</i></td>
<td width="25%"><i>1000 coins</i></td>
</tr>
<tr id="taskAnsE1" class="members">
<td colspan="4">From Varrock centre, go a little south until you see Thessalia's Clothing Shop.  Choose the "Change-Clothes Thessalia" option and you will have completed a task!  Note that you only need to carry 1000 coins, you don't have to change any clothing too.</td>
</tr>

 

Notes on the above code:

• Each main table for each group of tasks should be wrapped in a <form> element, with an ID & Name of 'tasks' + group index. So in the example page, the easy tasks form is 'tasksE'.
  
• Added a 'Complete' column in the header on the left side (can be on the right, doesn't matter).
  
• For each row, they've been given an ID of either 'taskReq' + group + task index, or 'taskAns' + group + last index.
  
• For instance, the first 2 rows are 'taskReqE1' & 'taskAnsE2' respectively.
  
• The 'Req' row is the 'Requirements' row.
  
• The 'Ans' row is the 'Answers' row.
  
• Both of the row names is what I decided to call them, the tip.it developers can call them whatever makes more sense for them.
  
• In each of the 'Requirements' row, I added the following <td>: <td rowspan="2"><input type="checkbox" id="chkE1" name="chkE1" onclick="javascript: updateComplete('E', '1');" /></td>
  
• Obviously each instance of 'E1', changes to 'E2', 'E3', or 'M1', and so on for each corresponding row.
  
• I decided it made more sense to me to have the checkbox column span both rows, but that is also optional.
  

 

 

----------------------------------------------------------------------------------------------------------------------

 

The above example only covers hiding completed tasks while you are on that page (ie, the checked values aren't stored in a cookie or php session - so if you leave the page, or close your browser, the user has to recheck everything).

I would prefer that there also be a 'Save Done' button on above example so that similar to the Quests List, when you click the 'Save Done' button, if I come back to Achievement Diaries, the completed ones go back to being hidden automatically.

 

However, that might be more work than it is worth.

 

Anyway, to the tip.it developers, feel free to steal/modify my example code if you decide to implement my above suggestion.

[Xena_Dragon]

It would be nice while I'm working through achievements, I can mark completed tasks as done, and have them be hidden.

 

I've recreated the Easy Tasks for the Varrock Achievement Diary, please see http://www.b-o-b.org/VarrockAchievementDiary.html (this is my own personal site, and the linked page is only to demonstrate what I mean).

 

{SNIP}

 

The above example only covers hiding completed tasks while you are on that page (ie, the checked values aren't stored in a cookie or php session - so if you leave the page, or close your browser, the user has to recheck everything).

I would prefer that there also be a 'Save Done' button on above example so that similar to the Quests List, when you click the 'Save Done' button, if I come back to Achievement Diaries, the completed ones go back to being hidden automatically.

 

However, that might be more work than it is worth.

 

Anyway, to the tip.it developers, feel free to steal/modify my example code if you decide to implement my above suggestion.

 

Looks like a very nice addition to the site indeed. Thanks for supplying all that example code. We'll have a go with it, and let you know (at a later date of course) what has come from this idea.

[Xena_Dragon]

The Ardougne Achievement Diary has now been enhanced with this feature. I've also added saving your current status in a cookie, so that when you return to the page, your current progress on the diary will show.

 

We'll add this to the rest of the diaries soon. Thanks for this wonderful addition :thumbup:

[TheeBOBJohnson]

The Ardougne Achievement Diary has now been enhanced with this feature. I've also added saving your current status in a cookie, so that when you return to the page, your current progress on the diary will show.

 

We'll add this to the rest of the diaries soon. Thanks for this wonderful addition :thumbup:

 

Thanks for putting this in! It's a great help while working through the diary achievements!

[TheeBOBJohnson]

It looks great, just one minor bug:

 

On all diary pages, for your cookie code, you have:

diary_name = 'diary_varrock';

 

So say on Varrock's page, I check Easy Task 1, and then go to Falador's page, Falador has Easy Task 1 selected/hidden already (cause they are sharing the same cookie).

 

The only exception to this is Lumbridge which is currently working perfectly.

[Xena_Dragon]

It looks great, just one minor bug:

 

On all diary pages, for your cookie code, you have:

diary_name = 'diary_varrock';

 

So say on Varrock's page, I check Easy Task 1, and then go to Falador's page, Falador has Easy Task 1 selected/hidden already (cause they are sharing the same cookie).

 

The only exception to this is Lumbridge which is currently working perfectly.

DOH! Should be all better now.