Skip to content

Commit

Permalink
Add favicon, refactor tutorial.js to separate each lesson into a func…
Browse files Browse the repository at this point in the history 
…tion and use cleaner syntax, fix Today's feature list showing up on Mondays
  • Loading branch information
Derrick Coetzee committed Apr 9, 2012
1 parent b165907 commit 52afea7
Show file tree
Hide file tree
Showing 4 changed files with 177 additions and 105 deletions.
9 changes: 7 additions & 2 deletions LocalSettings.php
View file
Expand Up @@ -34,14 +34,16 @@

## The protocol and server name to use in fully-qualified URLs
$wgServer = "http://wikipediaadventure.moonflare.com";
# $wgServer = "http://localhost"; # For testing
# $wgServer = "http://localhost"; # For testing


## The relative URL path to the skins directory
$wgStylePath = "$wgScriptPath/skins";

## The relative URL path to the logo. Make sure you change this from the default,
## or else you'll overwrite your logo when you upgrade!
$wgLogo = "$wgStylePath/common/images/Wiki.png";
$wgFavicon = "$wgScriptPath/favicon.ico";

## UPO means: this is also a user preference option

Expand All @@ -66,7 +68,7 @@
$wgSQLiteDataDir = "data";

## Shared memory settings
$wgMainCacheType = CACHE_NONE;
$wgMainCacheType = CACHE_ACCEL;
$wgMemCachedServers = array();

## To enable image uploads, make sure the 'images' directory
Expand Down Expand Up @@ -153,3 +155,6 @@
$wgDefaultSkin = 'vector';
$wgVectorUseIconWatch = true;
$wgShowIPinHeader = false;

# Caching stuff for performance
$wgCacheDirectory = "$IP/cache";
Binary file modified data/wikipediaadventure.db.sqlite
View file
Binary file not shown.
Binary file added favicon.ico
View file
Binary file not shown.
273 changes: 170 additions & 103 deletions skins/common/tutorial.js
View file
@@ -1,3 +1,5 @@
exit();

// Based on http://www.codeproject.com/Tips/61476/Disable-all-links-on-the-page-via-Javascript
function DisableEnableLinks(){
objLinks = document.links;
Expand Down Expand Up @@ -56,22 +58,23 @@ function getOffset( el ) {
return { top: _y, left: _x };
}

var updatePositions = function() {
if (arrowTarget) {
var marker=document.getElementById('twa-marker');
offset = $(arrowTarget).offset();
marker.style.left = '' + (offset.left + $(arrowTarget).width()/2 - $(marker).width()/2) + 'px'; // center
marker.style.top = '' + (offset.top + $(arrowTarget).height()) + 'px'; // right under pt-login
}
}

var getStep = function() {
result = $.cookie("twa-step");
return result;
}

var setStep = function(stepNum) {
$.cookie("twa-step", stepNum, { path: '/' });
var setStep = function(stepName) {
if (stepName.indexOf("/") == -1) {
components = getStep().split('/');
setStep(components[0] + "/" + stepName);
return;
}
$.cookie("twa-step", stepName, { path: '/' });
}

var goToStep = function(stepName) {
setStep(stepName);
updateOverlays();
}

var centerElement = function(element) {
Expand All @@ -83,11 +86,162 @@ var centerElement = function(element) {
$(element).css('margin-left', '' + -$(element).width()/2 + 'px');
};

// Visually highlights a given element - currently can only do one at a time
var highlightElement = function(target) {
var marker = document.getElementById('twa-marker');
marker.innerHTML = '<img src="' + stylepath + '/common/images/Up-1.png" width="100" height="89"/>';
offset = $(target).offset();
marker.style.left = '' + (offset.left + $(target).width()/2 - $(marker).width()/2) + 'px'; // center
marker.style.top = '' + (offset.top + $(target).height()) + 'px'; // right under pt-login
return target;
};

var updateFirstEdit = function(step, instructions) {
switch(step) {
case 'Welcome':
instructions.innerHTML =
'<div style="text-align:right;"><a onclick="goToStep(\'Twa/Login\');">Log in</a></div>' +
'<p>Welcome to <b>The Wikipedia Adventure</b>, a tutorial for new Wikipedia users. Instructions will appear in the lower-right.</p>' +
'<p>Would you like to review how to make an edit to an article?</p>' +
'<p><a onclick="goToStep(\'MainPageClickArticle\');">Yes</a> <a onclick="goToStep(\'CreateUser/Start\');">No</a></p>';
centerElement(instructions);
break;
case "MainPageClickArticle":
instructions.innerHTML =
'<p>Begin by clicking on the <b>George Tupou V</b> link to visit the article on George Tupou V, King of Tonga.</p>';
$(highlightElement('a[title="George Tupou V"]'))[0].onclick = function(){setStep('FindError')};
break;
case 'FindError':
instructions.innerHTML =
'<p>You are now reading the article on George Tupou V. This article contains a small error in its first sentence. ' +
'Try to find it and click on it.</p>';
var content = $("div[class=mw-content-ltr]")[0];
content.innerHTML = content.innerHTML.replace(" deth ", ' <span id="deth" onclick="goToStep(\'ShowError\')">deth</span> ');
break;
case 'ShowError':
instructions.innerHTML =
'<p>Nice spotting! The error is that "death" is misspelled as "deth". We\'re going to fix this.</p>' +
'<p><a onclick="goToStep(\'ClickEditTab\');">Next</a></p>';
$('#deth')[0].onclick = null;
highlightElement('#deth');
break;
case 'ClickEditTab':
instructions.innerHTML =
'<p>Start by clicking on the <b>Edit</b> tab to edit the article.</p>';
$(highlightElement('#ca-edit')).find('a')[0].onclick = function(){setStep('Editing');};
break;
case 'Editing':
instructions.innerHTML =
'<p>You are now editing the article. Find the misspelled word <b>deth</b> and change it to "death", then click <b>Next</b> below.</p>' +
'<p><a onclick="goToStep(\'DoneEditing\');">Next</a></p>';
desired_value = $('#wpTextbox1')[0].value.replace(' deth ', ' death ');
break;
case 'DoneEditing':
if ($('#wpTextbox1')[0].value == desired_value) {
instructions.innerHTML =
'<p>Good job! Next, click on the <b>Summary</b> field and enter a short explanation for your edit, such as "fixed spelling error". ' +
'This is called an <i>edit summary</i>, and every edit should have one. Then click <b>Next</b> below.</p>' +
'<p><a onclick="goToStep(\'DoneSummary\');">Next</a></p>';
highlightElement('#wpSummary');
} else {
instructions.innerHTML =
'<p>You made the change incorrectly. Make sure you changed <b>deth</b> to "death" and <b>made no other changes</b>. ' +
'Click <b>Next</b> below to try again.</p>' +
'<p><a onclick="goToStep(\'DoneEditing\');">Next</a></p>';
}
break;
case 'DoneSummary':
if ($('#wpSummary')[0].value.length > 0) {
instructions.innerHTML =
'<p>Great! Finally, click on <b>Save page</b> to save your changes to the article.</p>';
$('#editform')[0].onsubmit = function(){
// Don't really let them save - just redirect back to article, we'll fake the changes.
// TODO: if they attempt incorrectly more than once the message won't appear to change
setStep('ShowArticleWithChange');
window.location.href = wgArticlePath.replace('$1', 'George_Tupou_V');
return false;
}
highlightElement('#wpSave');
} else {
instructions.innerHTML =
'<p>You did not enter a summary. ' +
'Click on the <b>Summary</b> field indicated by the arrow and enter a short explanation for your edit, such as "fixed spelling error". ' +
'Then click <b>Next</b> below.</p>' +
'<p><a onclick="goToStep(\'DoneSummary\');">Next</a></p>';
}
break;
case 'ShowArticleWithChange':
instructions.innerHTML =
'<p>Your changes to the article appear instantly to all readers. ' +
'If your changes were incorrect, another user can always easily change it back. ' +
'Click <b>Next</b> below for your <b>Real Wikipedia Bonus Task</b>.</p>' +
'<p><a onclick="goToStep(\'RealWikipediaBonusTask\');">Next</a></p>';
var content = $("div[class=mw-content-ltr]")[0];
content.innerHTML = content.innerHTML.replace(" deth ", ' <span id="death">death</span> ');
highlightElement('#death');
break;
case 'RealWikipediaBonusTask':
instructions.innerHTML =
'<p><b>Real Wikipedia Bonus Task</b></p>' +
'<p>You\'re now ready to make a real edit to Wikipedia. ' +
'Visit <a href="http://en.wikipedia.org" onclick="$(this).attr(\'target\', \'_blank\');">en.wikipedia.org</a> and click on the <b>Random article</b> link (indicated). ' +
'Look for a minor error in spelling, grammar, punctuation, or style and fix it. ' +
'If you don\'t see one, click <b>Random article</b> again until you do. ' +
'When done, click <b>Next</b> below.</p>' +
'<p><a onclick="goToStep(\'LessonComplete\');">Next</a></p>';
highlightElement('#n-randompage');
break;
case 'LessonComplete':
instructions.innerHTML =
'<p>Great job! You have completed the first level. Click <b>Level menu</b> below to choose another level.</p>' +
'<p><a onclick="goToStep(\'Twa/LevelMenu\');">Level menu</a></p>';
centerElement(instructions);
break;
}
}

var updateCreateUser = function(step, instructions) {
switch(step) {
case "Start":
instructions.innerHTML =
'<p>Do you already have a user account registered on Wikipedia?</p>' +
'<p><a onclick="goToStep(\'Twa/CreateAccount\');">Yes</a> <a onclick="goToStep(\'MainPageClickLogIn\');">No</a></p>';
centerElement(instructions);
break;
case "MainPageClickLogIn":
instructions.innerHTML =
'<p>Under construction</p>';
break;
}
}

var updateTwa = function(step, instructions) {
switch(step) {
case 'LevelMenu':
instructions.innerHTML =
'<p><b>Select a level</b></p>' +
'<p><a href="' + wgArticlePath.replace('$1', 'Main_Page') + '" onclick="setStep(\'FirstEdit/Welcome\');">Making your first edit</a></p>' +
'<p><i>More levels to come!</i></p>';
centerElement(instructions);
break;
case "CreateAccount":
instructions.innerHTML =
'<p>Under construction</p>';
break;
case "Login":
instructions.innerHTML =
'<p>Under construction</p>';
break;
}
}

var updateOverlays = function() {
// Must call before enabling links selectively below
DisableEnableLinks();

arrowTarget = null;
// Hide marker initially, so it won't show if it's not used
var marker = document.getElementById('twa-marker');
marker.innerHTML = '';

var instructions = document.getElementById('twa-instructions');
instructions.style.position='fixed';
Expand All @@ -99,99 +253,12 @@ var updateOverlays = function() {
instructions.style.bottom = '10%';
instructions.innerHTML = '';

var marker = document.getElementById('twa-marker');
marker.innerHTML = '';
arrowTarget = null;
var stepComponents = getStep().split('/');
window["update" + stepComponents[0]](stepComponents[1], instructions);

if (getStep() == 'start') {
setStep("first-edit.welcome");
}

if (getStep() == "first-edit.welcome") {
instructions.innerHTML = '<p>Welcome to <b>The Wikipedia Adventure</b>, a tutorial for new Wikipedia users. Instructions will appear in the lower-right.</p>';
instructions.innerHTML += '<p>Would you like to review how to make an edit to an article?</p>';
instructions.innerHTML += '<p><a onclick="goToStep(\'first-edit.main-page-click-article\');">Yes</a> <a onclick="goToStep(\'level-menu\');">No</a></p>';
centerElement(instructions);
} else if (getStep() == "first-edit.main-page-click-article") {
instructions.innerHTML = '<p>Begin by clicking on the <b>George Tupou V</b> link to visit the article on George Tupou V, King of Tonga.</p>';
arrowTarget = 'a[title="George Tupou V"]';
$(arrowTarget)[0].onclick = function(){setStep('first-edit.find-error')};
} else if (getStep() == 'first-edit.find-error') {
instructions.innerHTML = '<p>You are now reading the article on George Tupou V. This article contains a small error in its first sentence. Try to find it and click on it.</p>';
var content = $("div[class=mw-content-ltr]")[0];
content.innerHTML = content.innerHTML.replace(" deth ", ' <span id="deth" onclick="goToStep(\'first-edit.show-error\')">deth</span> ');
} else if (getStep() == 'first-edit.show-error') {
instructions.innerHTML = '<p>Nice spotting! The error is that "death" is misspelled as "deth". We\'re going to fix this.</p>';
instructions.innerHTML += '<p><a onclick="goToStep(\'first-edit.click-edit-tab\');">Next</a></p>';
$('#deth')[0].onclick = null;
arrowTarget = '#deth';
} else if (getStep() == 'first-edit.click-edit-tab') {
instructions.innerHTML = '<p>Start by clicking on the <b>Edit</b> tab to edit the article.</p>';
arrowTarget = '#ca-edit';
$(arrowTarget).find('a')[0].onclick = function(){setStep('first-edit.editing');};
} else if (getStep() == 'first-edit.editing') {
instructions.innerHTML = '<p>You are now editing the article. Find the misspelled word <b>deth</b> and change it to "death", then click <b>Next</b> below.</p>';
instructions.innerHTML += '<p><a onclick="goToStep(\'first-edit.done-editing\');">Next</a></p>';
desired_value = $('#wpTextbox1')[0].value.replace(' deth ', ' death ');
} else if (getStep() == 'first-edit.done-editing') {
if ($('#wpTextbox1')[0].value == desired_value) {
instructions.innerHTML = '<p>Good job! Next, click on the <b>Summary</b> field and enter a short explanation for your edit, such as "fixed spelling error". This is called an <i>edit summary</i>, and every edit should have one. Then click <b>Next</b> below.</p>';
instructions.innerHTML += '<p><a onclick="goToStep(\'first-edit.done-summary\');">Next</a></p>';
arrowTarget = '#wpSummary';
} else {
instructions.innerHTML = '<p>You made the change incorrectly. Make sure you changed <b>deth</b> to "death" and <b>made no other changes</b>. Click <b>Next</b> below to try again.</p>';
instructions.innerHTML += '<p><a onclick="goToStep(\'first-edit.done-editing\');">Next</a></p>';
}
} else if (getStep() == 'first-edit.done-summary') {
if ($('#wpSummary')[0].value.length > 0) {
instructions.innerHTML = '<p>Great! Finally, click on <b>Save page</b> to save your changes to the article.</p>';
$('#editform')[0].onsubmit = function(){
// Don't really let them save - just redirect back to article, we'll fake the changes.
setStep('first-edit.show-article-with-change');
window.location.href = wgArticlePath.replace('$1', 'George_Tupou_V');
return false;
}
arrowTarget = '#wpSave';
} else {
instructions.innerHTML = '<p>You did not enter a summary. Click on the <b>Summary</b> field indicated by the arrow and enter a short explanation for your edit, such as "fixed spelling error". Then click <b>Next</b> below.</p>';
instructions.innerHTML += '<p><a onclick="goToStep(\'first-edit.done-summary\');">Next</a></p>';
}
} else if (getStep() == 'first-edit.show-article-with-change') {
instructions.innerHTML = '<p>Your changes to the article appear instantly to all readers. If your changes were incorrect, another user can always easily change it back. Click <b>Next</b> below for your <b>Real Wikipedia Bonus Task</b>.</p>';
instructions.innerHTML += '<p><a onclick="goToStep(\'first-edit.real-wikipedia-bonus-task\');">Next</a></p>';
var content = $("div[class=mw-content-ltr]")[0];
content.innerHTML = content.innerHTML.replace(" deth ", ' <span id="death">death</span> ');
arrowTarget = '#death';
} else if (getStep() == 'first-edit.real-wikipedia-bonus-task') {
instructions.innerHTML = '<p><b>Real Wikipedia Bonus Task</b></p>';
instructions.innerHTML += '<p>You\'re now ready to make a real edit to Wikipedia. ';
instructions.innerHTML += 'Visit <a href="http://en.wikipedia.org" onclick="$(this).attr(\'target\', \'_blank\');">en.wikipedia.org</a> and click on the <b>Random article</b> link (indicated). ';
instructions.innerHTML += 'Look for a minor error in spelling, grammar, punctuation, or style and fix it. If you don\'t see one, click <b>Random article</b> again until you do. When done, click <b>Next</b> below.</p>';
instructions.innerHTML += '<p><a onclick="goToStep(\'first-edit.lesson-complete\');">Next</a></p>';
arrowTarget = '#n-randompage';
} else if (getStep() == 'first-edit.lesson-complete') {
instructions.innerHTML = '<p>Great job! You have completed the first level. Click <b>Level menu</b> below to choose another level.</p>';
instructions.innerHTML += '<p><a onclick="goToStep(\'level-menu\');">Level menu</a></p>';
centerElement(instructions);
} else if (getStep() == 'level-menu') {
instructions.innerHTML = '<p><b>Select a level</b></p>';
instructions.innerHTML += '<p><a href="' + wgArticlePath.replace('$1', 'Main_Page') + '" onclick="setStep(\'first-edit.welcome\');">Making your first edit</a></p>';
instructions.innerHTML += '<p><i>More levels to come!</i></p>';
centerElement(instructions);
} else {
if (instructions.innerHTML === '') {
instructions.innerHTML = '<p><font color="#ff0000">Unknown step name: ' + getStep() + '</font></p>';
}

if (arrowTarget) {
marker.innerHTML = '<img src="' + stylepath + '/common/images/Up-1.png" alt="Click here" width="100" height="89"/>';
}

updatePositions();
}

var goToStep = function(stepNum) {
setStep(stepNum);
updateOverlays();
}

window.onresize = function(event) {
Expand All @@ -215,6 +282,6 @@ marker.style.position='absolute';
root.appendChild(marker);

if (document.URL.indexOf("/Main_Page") != -1) {
setStep('start');
setStep("FirstEdit/Welcome");
}
updateOverlays();

0 comments on commit 52afea7

Please sign in to comment.