MediaWiki:Guidedtour-tour-twa1sandbox.js
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
// The Wikipedia Adventure Mission 1 - Visual Editor
( function ( window, document, $, mw, gt ) {
var api = new mw.Api();
// Disable these VE onboarding things that clash with TWA onboarding and don't explain anything TWA doesn't
api.saveOption("visualeditor-hidebetawelcome", 1);
api.saveOption("visualeditor-hideusered", 1);
//automatic api:edit function to send yourself messages
// Simplified version for this module which doesn't need the TWA Earth boilerplate
function sendMessage( targetPage, msgPage, linkTo, isTalk) {
if(!mw.config.get('wgUserName')) {
alert( "Please login." );
return;
}
api.get( {
'action' : 'query',
'titles' : msgPage+'|'+targetPage,
'prop' : 'revisions',
'meta' : 'tokens',
'type' : 'csrf',
'rvprop' : 'content',
'indexpageids' : 1
} ).done( function (result) {
result = result.query;
var page = result.pages[result.pageids[1]];
var text = page.revisions[0]['*'];
text = text.replaceAll("<nowiki/>","");
if (result.pageids[0] > 0) {
var targetSrc = result.pages[result.pageids[0]];
var srcText = targetSrc.revisions[0]['*'];
if (isTalk && srcText.includes(text.substring(0, 20))) {
// Don't send duplicates
window.location.href = linkTo;
return;
} else if (srcText.includes(text)) {
// Don't send duplicate badges
window.location.href = linkTo;
return;
}
}
api.post( {
'action' : 'edit',
'title' : targetPage,
'appendtext' : '\n'+text.replace("<nowiki/>",""),
'summary' : 'New Message (simulated automatically as part of [[WP:The Wikipedia Adventure|The Wikipedia Adventure]])',
'token' : result.tokens.csrftoken
} ).done( function () {
window.location.href = linkTo;
} );
} );
}
var tour = new gt.TourBuilder( {
name: 'twa1sandbox',
});
var steps = [{
//1
title: 'Welcome to Wikipedia!',
description: new gt.WikitextDescription('<br><div align="left">[[File:TWA_guide_left_top.png|link=]]</div>Wikipedia is a free encyclopedia that <b>anyone can edit</b>. I\'m here to take you on an interactive tour of our universe.<br><br>The journey has 7 missions, each with its own skills and surprises, all designed for you to become a great contributor to Wikipedia.<br><br>'),
overlay: true,
closeOnClickOutside: false,
buttons: [ {
name: 'Get equipped for the trip',
action: 'next',
}, {
name: 'I\'d like to leave',
onclick: function() { document.cookie = 'enwiki-mw-tour=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'; document.location.replace('/wiki/Wikipedia:The Wikipedia Adventure'); return false; }
} ],
allowAutomaticOkay: false,
}, {
//2
title: 'Know before you go',
description: new gt.WikitextDescription('<br><b>Don\'t [x] out</b><br> This box is your spacesuit: if you close it before completing a mission, you leave the adventure and need to restart the mission from the beginning.<br><br><b>Automatic messages</b><br> When you play this game, you send some messages to your personal Wikipedia page, any time you see <big><b>*</b></big> in the blue button.'),
overlay: true,
closeOnClickOutside: false,
buttons: [ {
name: '<big>←</big>',
action: 'back',
} , {
name: 'Come with me...',
action: 'next',
} ],
allowAutomaticOkay: false
}, {
//3
title: 'Why Wikipedia?',
description: new gt.WikitextDescription('<br><div align="right">[[File:TWA_guide_right_top.png|link=]]</div>We have a really awesome goal. <br><br><b>Imagine a world in which every single person on the planet is given free access to the sum of all human knowledge.</b><br><br>Most amazing is that...<br><br>'),
overlay: false,
closeOnClickOutside: false,
buttons: [ {
name: '<big>←</big>',
action: 'back',
} , {
name: 'It is happening',
action: 'next',
} ],
allowAutomaticOkay: false
}, {
//4
title: 'It is happening',
description: new gt.WikitextDescription('<br><div align="right">[[File:TWA_guide_right_top.png|link=]]</div>Wikipedia is viewed more than 8000 times a second by half a billion people each month. We\'re the only nonprofit top-ten website in the world. And we only got started in 2001!<br><br>'),
overlay: false,
closeOnClickOutside: false,
buttons: [ {
name: '<big>←</big>',
action: 'back'
} , {
name: 'Who writes this Wikipedia?',
action: 'next',
} ],
allowAutomaticOkay: false
}, {
//5
title: 'Who writes this Wikipedia?',
description: new gt.WikitextDescription('<br><div align="right">[[File:TWA_guide_right_top.png|link=]]</div>You do :) There are almost 50 million registered users. Most importantly, you don\'t have to be an expert to contribute. Almost all of our editors are volunteers.<br><br>'),
overlay: false,
closeOnClickOutside: false,
buttons: [ {
name: '<big>←</big>',
action: 'back'
} , {
name: 'Why do people edit?',
action: 'next',
} ],
allowAutomaticOkay: false
}, {
//6
title: 'Discover your special role',
description: new gt.WikitextDescription('<br><div align="left">[[File:TWA_guide_left_top.png|link=]]</div>The amazing part of Wikipedia is you get to discover your own path and purpose. But each person\'s impact scales to make a huge difference. Your impact can change the world.<br><br>'),
overlay: false,
closeOnClickOutside: false,
buttons: [ {
name: '<big>←</big>',
action: 'back'
} , {
name: 'Are you ready?',
action: 'next',
} ],
allowAutomaticOkay: false,
}, {
//7
title: 'Login or create an account',
description: new gt.WikitextDescription('<br><div align="left">[[File:TWA_guide_left_top.png|link=]]</div>Creating an account gives you lots of neat benefits. Go for it.<br><br>'),
overlay: false,
closeOnClickOutside: false,
buttons: [ {
name: '<big>←</big>',
action: 'back',
} , {
name: 'Log in!',
action: 'externalLink',
url: mw.util.getUrl( 'Special:UserLogin' ) + '?tour=twa1&step=7'
} , {
name: 'Register!',
action: 'externalLink',
url: mw.config.get('wgServer') + mw.config.get('wgScriptPath') + '/index.php?title=Special:CreateAccount&returnto=Wikipedia:TWA/1/Start&returntoquery=tour%3Dtwa1%26step%3D8'
} ],
allowAutomaticOkay: false,
skip: function() {
return mw.config.get('wgUserId') != null;
}
} , {
//8
title: 'Say hello to Wikipedia',
description: new gt.WikitextDescription('<br> Let\'s start off by introducing yourself to the community.<br><br>It will take just a few seconds to load the universe—light only travels so fast.<br><br>(For the rest of the journey, you need to be logged in.)<br><br>'),
overlay: true,
closeOnClickOutside: false,
buttons: [ {
name: '<big>←</big>',
action: 'back',
} , {
name: 'Hello World*',
onclick: function() { if(!mw.config.get('wgUserName')){ alert( "Please login." ); return; } sendMessage( 'User talk:' + mw.config.get( 'wgUserName' ), 'Wikipedia:TWA/Welcome' , mw.util.getUrl( 'Special:MyPage' ) + '?tour=twa1&step=9', true); }
} ],
allowAutomaticOkay: false
} , {
//9
title: 'Your userpage',
description: new gt.WikitextDescription('<br><div align="right">[[File:TWA_guide_right_top.png|link=]]</div>Your userpage is a place to tell other editors about yourself. You can share about your background and interests and what you\'d like to contribute to the project--share as much or as little as you like...<br><br><i>Remember this is a very public profile, so keep private information, well, private.</i><br><br>'),
overlay: false,
closeOnClickOutside: false,
buttons: [ {
name: '<big>←</big>',
action: 'externalLink',
url: mw.util.getUrl( 'Wikipedia:TWA/1/Start' ) + '?tour=twa1&step=8'
} , {
name: 'What does a good userpage look like?',
action: 'externalLink',
url: mw.util.getUrl( 'Wikipedia:TWA/1/Bio' ) + '?tour=twa1&step=10'
} ],
allowAutomaticOkay: false
} , {
//10
title: 'Challenge yourself BELOW...',
description: new gt.WikitextDescription('Hint: you can learn as much from getting it wrong as getting it right. And you can always try again!'),
attachTo:'#contentSub',
position: 'bottom',
overlay: false,
closeOnClickOutside: false,
allowAutomaticOkay: false,
buttons: [ {
name: '<big>←</big>',
action: 'externalLink',
url: mw.util.getUrl( 'Special:MyPage' ) + '?tour=twa1&step=9'
} ],
} , {
//11
title: 'Your turn!',
description: new gt.WikitextDescription('<br>Creating your userpage on Wikipedia is as simple as editing it.<br><br>Click <b>CREATE</b> or <b>EDIT</b> above.<br><br>'),
attachTo: '#ca-edit',
position: 'bottom',
overlay: false,
closeOnClickOutside: false,
allowAutomaticOkay: false,
buttons: [ {
name: '<big>←</big>',
action: 'externalLink',
url: mw.util.getUrl( 'WP:TWA/1/Bio' ) + '?tour=twa1&step=10'
} ],
skip: "vefork",
hooks: "ve.activationComplete"
}, {
//12
title: 'The editing interface',
description: new gt.WikitextDescription('<br><div align="right">[[File:TWA_guide_right_top.png|link=]]</div>Now, this is where the magic happens.<br><br>This is the visual editor. Type something in the editable area: your username, city or country, education, skills, and interests. What are you excited about <i>doing</i> here? Share as much or as little as you like, but make at least <b>ONE</b> edit. <br><br>If you already have a userpage, make at least <b>ONE</b> improvement to it.<br><br>When you\'re ready, click PUBLISH PAGE or PUBLISH CHANGES.'),
overlay: false,
attachTo: '.ve-ui-toolbar-group-save',
position: 'bottom',
closeOnClickOutside: false,
allowAutomaticOkay: false,
buttons: [ {
name: '<big>←</big>',
action: 'externalLink',
url: mw.util.getUrl( 'Special:MyPage' ) + '?tour=twa1&step=11'
}],
skip: function(transitionEvent) {
return transitionEvent.type === gt.TransitionEvent.MW_HOOK && transitionEvent.hookName == "ve.saveDialog.stateChanged";
},
hooks: "ve.saveDialog.stateChanged"
} , {
//13
title: 'Edit summary and Publish',
description: new gt.WikitextDescription( '<br>That looks pretty good! Leave a brief note about the changes you made, called an Edit Summary. This helps others follow along with your work.<br><br>Let\'s say that you "Introduced myself".<br><br>Now all you have to do is Publish it. Publishing makes an edit live and public. Click PUBLISH PAGE or PUBLISH CHANGES again when you\'re ready.<br><br>'),
overlay: false,
// Ideally this would be attached to the save dialog itself but since it is still loading when the tour event fires that doesn't work
attachTo: "#footer",
position:"bottom",
closeOnClickOutside: false,
allowAutomaticOkay: false,
skip: gt.isPostEdit,
buttons: [ {
name: 'Go back',
action: 'back'
} ],
} , {
//14
title: 'Congrats!',
description: new gt.WikitextDescription('NEW TOOL EARNED: <b>Editor Badge</b><div class="center">[[File:TWA badge 1.png|250px|link=]]</div><br>You\'re a Wikipedia editor! How does it feel? It\'s great that you introduced yourself.<br>'),
overlay: false,
closeOnClickOutside: false,
allowAutomaticOkay: false,
buttons: [ {
name: '<big>←</big>',
action: 'back',
url: mw.util.getUrl( 'Special:MyPage' ) + '?tour=twa1&step=13&veaction=edit'
} , {
name: 'Make it even better*',
onclick: function() { if(!mw.config.get('wgUserName')){ alert( "Please login." ); return; } sendMessage( 'User:' + mw.config.get( 'wgUserName' ), 'Wikipedia:TWA/Badge/1template2' , mw.util.getUrl( 'Special:MyPage' ) + '?tour=twa1&step=15', false); }
} ],
} , {
//15
title: 'Even better',
description: new gt.WikitextDescription('<br>Let\'s go back and make a few changes to the text. Click <b>EDIT</b><br><br>'),
overlay: false,
attachTo: '#ca-edit',
position: 'bottom',
closeOnClickOutside: false,
allowAutomaticOkay: false,
buttons: [ {
name: '<big>←</big>',
action: 'back'
} ],
skip: "vefork",
hooks: "ve.activationComplete"
} , {
//16
title: 'Add bold',
description: new gt.WikitextDescription('<br><div align="right">[[File:TWA guide right top.png|link=]]</div>In the text box, Highlight your username (or another key phrase) with your mouse.<br><br>Then click the <big><u>\'\'\'\'\'A\'\'\'\'\'</u></big> in the toolbar above and select BOLD.<br><br>The visual editor makes editing much easier because it automatically adds formatting.<br/>.'),
attachTo: "#bodyContent",
position: 'leftTop',
overlay: false,
closeOnClickOutside: false,
buttons: [ {
name: '<big>←</big>',
action: 'externalLink',
url: mw.util.getUrl( 'Special:MyPage' ) + '?tour=twa1&step=15'
} , {
name: 'Bolded',
action: 'next'
} ],
} , {
//17
title: 'Add italics',
description: new gt.WikitextDescription('<br><div align="right">[[File:TWA guide right top.png|link=]]</div>Now highlight your interests.<br><br>Then select ITALIC from the same toolbar menu to put them in italics.<br><br>'),
attachTo: "#bodyContent",
position: 'leftTop',
overlay: false,
closeOnClickOutside: false,
allowAutomaticOkay: false ,
buttons: [ {
name: '<big>←</big>',
action: 'back'
} , {
name: 'Italicized',
action: 'next'
} ],
} , {
//18
title: 'Add wikilinks',
description: new gt.WikitextDescription('<br><div align="right">[[File:TWA guide right top.png|link=]]</div>You can link to other pages on Wikipedia. This helps "build the web", and keeps you from getting any work done while you bounce from one article to another ;)<br><br> Highlight the city or country where you\'re from. <br><br>Then click the [[File:OOjs UI icon link-ltr.svg]] button in the editing toolbar (it looks like part of a chain).<br><br>Last, click DONE to insert the link, and click PUBLISH CHANGES to publish your changes.<br><br>'),
attachTo: "#bodyContent",
position: 'leftTop',
overlay: false,
closeOnClickOutside: false,
buttons: [ {
name: '<big>←</big>',
action: 'back'
}],
skip: function(transitionEvent) {
return transitionEvent.type === gt.TransitionEvent.MW_HOOK && transitionEvent.hookName == "ve.saveDialog.stateChanged";
},
allowAutomaticOkay: false,
hooks: "ve.saveDialog.stateChanged"
} , {
//19
title: 'Edit summary and Publish',
description: new gt.WikitextDescription('<br>You "Added bold, italics, and wikilinks". Just click PUBLISH CHANGES again, and your edits will go live.<br><br>'),
attachTo: "#footer",
position:"bottom",
overlay: false,
closeOnClickOutside: false,
allowAutomaticOkay: false,
buttons: [ {
name: 'Go back',
action: 'externalLink',
url: mw.util.getUrl( 'Special:MyPage' ) + '?tour=twa1&step=18&veaction=edit'
} ],
skip: gt.isPostEdit,
} , {
//20
title: 'You did it :)',
description: new gt.WikitextDescription('NEW TOOL EARNED: <b>Formatter Badge</b><div class="center">[[File:TWA badge 2.png|250px|link=]]</div><br>You\'re learning fast. You\'re awesome. We\'re just getting started but already you have the basic tools to go on an adventure. Keep an eye on the skill meter at the bottom of the page as you develop more and more strengths.<br>'),
overlay: true,
closeOnClickOutside: false,
buttons: [ {
name: '<big>←</big>',
action: 'externalLink',
url: mw.util.getUrl( 'Special:MyPage' ) + '?tour=twa1&step=19&veaction=edit'
} , {
name: 'What\'s next??*',
onclick: function() { if(!mw.config.get('wgUserName')){ alert( "Please login." ); return; } sendMessage( 'User:' + mw.config.get( 'wgUserName' ), 'Wikipedia:TWA/Badge/2template2' , mw.util.getUrl( 'Wikipedia:TWA/1/End' ) + '?tour=twa1&step=21', false); }
} ],
allowAutomaticOkay: false
} , {
//21
title: 'Mission 1 complete!',
description: new gt.WikitextDescription('<br>[[File:Carl Czerny - Duo Concertante - 1. Allegro (short).ogg]]<br><b>Journey on to mission 2...</b>'),
overlay: false,
closeOnClickOutside: false,
buttons: [ {
name: 'Congrats me!',
action: 'end'
} ],
}];
var sourceEditorStepOverrides = {
12: {
title: 'The editing interface',
description: new gt.WikitextDescription('<br><div align="right">[[File:TWA_guide_right_top.png|link=]]</div>Now, this is where the magic happens.<br><br>Type into the big text box towards the top left: your username, city or country, education, skills, and interests. What are you excited about <i>doing</i> here? Share as much or as little as you like, but make at least <b>ONE</b> edit. <br><br>If you already have a userpage, make at least <b>ONE</b> improvement to it.<br><br>'),
overlay: false,
attachTo: '#wpTextbox1',
position: 'bottomRight',
closeOnClickOutside: false,
buttons: [ {
name: '<big>←</big>',
action: 'externalLink',
url: mw.util.getUrl( 'Special:MyPage' ) + '?tour=twa1&step=11'
} , {
name: 'Typed it',
action: 'next'
} ],
}, 13: {
title: 'Edit summary and Publish',
description: new gt.WikitextDescription( '<br>That looks pretty good! Before you click Publish, leave a brief note about the changes you made, called an Edit Summary. This helps others follow along with your work.<br><br>Let\'s say that you "Introduced myself".<br><br>Now all you have to do is Publish it. Publishing makes an edit live and public. Click PUBLISH when you\'re ready.<br><br>'),
overlay: false,
attachTo: '#wpSave',
position: 'bottomRight',
closeOnClickOutside: false,
allowAutomaticOkay: false,
skip: gt.isPostEdit,
buttons: [ {
name: '<big>←</big>',
action: 'back'
} ],
}, 16: {
title: 'Add bold',
description: new gt.WikitextDescription('<br><div align="right">[[File:TWA guide right top.png|link=]]</div>In the text box, Highlight your username (or another key phrase) with your mouse.<br><br>Then click the [[File:OOjs UI icon bold-b.svg]] button on the editing toolbar above the text box.<br><br>The editing toolbar makes Wikipedia much much easier, because it adds the formatting for you.'),
attachTo: '#wpTextbox1',
position: 'bottomRight',
overlay: false,
closeOnClickOutside: false,
buttons: [ {
name: '<big>←</big>',
action: 'externalLink',
url: mw.util.getUrl( 'Special:MyPage' ) + '?tour=twa1&step=15'
} , {
name: 'Bolded',
action: 'next'
} ],
}, 17: {
title: 'Add italics',
description: new gt.WikitextDescription('<br><div align="right">[[File:TWA guide right top.png|link=]]</div>Now highlight your interests.<br><br>Then click [[File:OOjs UI icon italic-i.svg]] on the editing toolbar to put them in italics.<br><br>'),
attachTo: '#wpTextbox1',
position: 'bottomRight',
overlay: false,
closeOnClickOutside: false,
allowAutomaticOkay: false ,
buttons: [ {
name: '<big>←</big>',
action: 'back'
} , {
name: 'Italicized',
action: 'next'
} ],
}, 18: {
//18
title: 'Add wikilinks',
description: new gt.WikitextDescription('<br><div align="right">[[File:TWA guide right top.png|link=]]</div>You can link to other pages on Wikipedia. This helps "build the web", and keeps you from getting any work done while you bounce from one article to another ;)<br><br> Highlight the city or country where you\'re from. <br><br>Then click the [[File:OOjs UI icon link-ltr.svg]] button in the editing toolbar (it looks like part of a chain).<br><br>Last, INSERT the link.<br><br>'),
attachTo: '#wpTextbox1',
position: 'bottomRight',
overlay: false,
closeOnClickOutside: false,
buttons: [ {
name: '<big>←</big>',
action: 'back'
} , {
name: 'WikiLinked',
action: 'next'
} ],
}, 19: {
//19
title: 'Edit summary and Publish',
description: new gt.WikitextDescription('<br>You "Added bold, italics, and wikilinks". Just click PUBLISH, and your edits will go live.<br><br>'),
attachTo: '#wpSave',
position: 'bottomRight',
overlay: false,
closeOnClickOutside: false,
allowAutomaticOkay: false,
buttons: [ {
name: '<big>←</big>',
action: 'externalLink',
url: mw.util.getUrl( 'Special:MyPage' ) + '?tour=twa1&step=18&action=edit'
} ],
skip: gt.isPostEdit
}
};
var stepBuilders = [];
var sStepBuilders = [];
function makeSkip(target, query) {
return function(event) {
if (query(event)) {
return target;
}
};
}
function makeVeSkip(target1, target2) {
return function() {
if (gt.isEditingWithVisualEditor()) {
return target1;
} else if (gt.isEditingWithWikitext()) {
return target2;
}
};
}
for (var i = 0; i < steps.length; i++) {
var step = steps[i];
step.allowAutomaticNext = false;
step.name = (i+1).toString();
var stepBuilder;
if (i == 0) {
stepBuilder = tour.firstStep(step);
} else {
stepBuilder = tour.step(step);
}
stepBuilders[i] = stepBuilder;
if (sourceEditorStepOverrides[i]) {
var sStep = sourceEditorStepOverrides[i];
sStep.allowAutomaticNext = false;
sStep.name = i.toString()+"src";
sStepBuilders[i-1] = tour.step(sStep);
}
}
for (var j = 0; j < steps.length; j++) {
if (steps[j].hooks) {
stepBuilders[j].listenForMwHooks(steps[j].hooks);
}
if (steps[j].skip) {
if (steps[j].skip == "vefork") {
stepBuilders[j].transition(makeVeSkip(stepBuilders[j+1], sStepBuilders[j+1]));
} else {
stepBuilders[j].transition(makeSkip(stepBuilders[j+1], steps[j].skip));
}
}
if (sourceEditorStepOverrides[j] && sourceEditorStepOverrides[j].skip) {
sStepBuilders[j-1].transition(makeSkip(sStepBuilders[j] || stepBuilders[j], sourceEditorStepOverrides[j].skip));
}
if (j > 0) {
stepBuilders[j].back(stepBuilders[j-1]);
if (sStepBuilders[j] && sStepBuilders[j-1]) {
sStepBuilders[j].back(sStepBuilders[j-1]);
}
}
if (j < steps.length - 1) {
stepBuilders[j].next(stepBuilders[j+1]);
if (sStepBuilders[j] && sStepBuilders[j+1]) {
sStepBuilders[j].next(sStepBuilders[j+1]);
}
}
}
} (window, document, jQuery, mediaWiki, mediaWiki.guidedTour ) ) ;