BrowserTrek
For any front-end (JavaScript, HTML, CSS) developer
.
..
A game designed for front-end developers and those aspiring to be. It combines JS, HTML and CSS to educate and test players on various aspects of coding.
Settings (S)
Bonus Challenges (B)
Reset all challenges
BrowserTrek
For any front-end (JavaScript, HTML, CSS) developer
Settings (S)
Bonus Challenges (B)
Reset all challenges
Part 1
Tutorial Challenge
Geolocation 1
Challenge 1
Storage 1: Cookies
Challenge 2
CSS rules 1
Challenge 3
Messages 1: Dialogs
Challenge 4
Popup windows 1
Challenge 5
Changing content 1
Challenge 6
Canvas 1
Part 2
Challenge 7
Hashes
Challenge 8
PHP
Challenge 9
RegExp 1
Challenge 10
History
Challenge 11
Fullscreen API
Challenge 12
Drag and Drop 1
Challenge 13
AJAX 1
Part 3
Challenge 14
Geolocation 2
Challenge 15
Storage 2: Local
Challenge 16
CSS Rules 2
Challenge 17
Messages 2: Modals
Challenge 18
Popup windows 2
Challenge 19
Changing Content 2
Challenge 20
Canvas 2
Part 4
Challenge 21
URLs
Challenge 22
YouTube
Challenge 23
RegExp 2
Challenge 24
Google Charts API
Challenge 25
Devices
Challenge 26
Drag and Drop 2
Challenge 27
AJAX 2
Part 5
Challenge 28
Challenge 29
Challenge 30
Challenge 31
Challenge 32
Challenge 33
Challenge 34
×
Bonus Challenges
Reset Bonuses
Bonus Challenge 1
Bonus Challenge 2
Bonus Challenge 3
Bonus Challenge 4
×
Settings
Remember completed challenges (not incl. bonuses)
Remember completed bonus challenges
In-App Purchases
×
In-App Purchases
Credit Card Vendor:
Credit Card Number:
Amount to Put Into Account: $
Go
"); function scrollRight() { if (scrollstage === 1) { scrollstage = 2; document.getElementById("p5").removeAttribute("hidden"); document.getElementById("p1").setAttribute("hidden", ""); document.getElementById("leftbtn").removeAttribute("disabled"); document.getElementById("rightbtn").setAttribute("disabled", ""); $("#p2").removeClass("righter"); $("#p2").addClass("nonrighter"); } } function scrollLeft() { if (scrollstage === 2) { scrollstage = 1; document.getElementById("p1").removeAttribute("hidden"); document.getElementById("p5").setAttribute("hidden", ""); document.getElementById("rightbtn").removeAttribute("disabled"); document.getElementById("leftbtn").setAttribute("disabled", ""); $("#p2").removeClass("nonrighter"); $("#p2").addClass("righter"); } } if (document.referrer.indexOf("?me=awesome") >= 0) { location.assign("http://browsertrek.neocities.org/c8.html#done"); } document.getElementById("fullscreen").addEventListener("click", function() { if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) { if(document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } else if(document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if(document.documentElement.webkitRequestFullscreen) { document.documentElement.webkitRequestFullscreen(); } else if(document.documentElement.msRequestFullscreen) { document.documentElement.msRequestFullscreen(); } alert("Note: You can always enter and exit fullscreen while doing challenges by pressing:\n F11 (Windows)\n Control + Command + F (Mac)"); } else { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } }); var extended = false; document.getElementById("extend").addEventListener("click", function(){ if (extended) { document.getElementById("extend").innerText = ".."; $(".menu").removeAttr("hidden"); extended = false; } else { document.getElementById("extend").innerText = " A game designed for front-end developers and those aspiring to be. It combines JS, HTML and CSS to educate and test players on various aspects of coding."; $(".menu").attr("hidden", ""); extended = true; } }); window.addEventListener("beforeunload", function() { if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement) { alert("Press F11 on a new page to retain fullscreen"); } }); document.getElementById("leftbtn").addEventListener("click", scrollLeft); document.getElementById("rightbtn").addEventListener("click", scrollRight); for (var i = 3; i <= 5; i++) { if (getUnlocked(i)) { $("#p"+i+" > .btn-group-vertical > a > .lock").attr("hidden", ""); } else { $("#p"+i+" > .btn-group-vertical > a").attr("disabled", ""); } } for (var i = 0; i <= cnum; i++) { if (getDone(i)) { $(".c" + i).removeClass("btn-primary"); $(".c" + i).addClass("btn-success"); $(".c" + i + " > .icon").removeAttr("hidden"); $(".c" + i + " > .lock").attr("hidden", ""); $(".c" + i + " > .name").attr("hidden", ""); $(".c" + i).removeAttr("disabled"); } } function getUnlocked(num) { if (typeof(Storage) !== "undefined") { if (localStorage["c"+num+"unlock"] === "1") { return true; } else { return false; } } else if (!navigator.cookieEnabled == "false") { if (getCookie("c"+num+"unlock") === "1") { return true; } else { return false; } } else { alert("Please enable cookies for full website functionality"); } } console.info("unlock(num) is a very useful function"); function unlock(num) { if (num >= 3 && num <= 5) { if (typeof(Storage) !== "undefined") { localStorage.setItem("c"+num+"unlock", "1"); } else if (!navigator.cookieEnabled == "false") { setCookie("c"+num+"unlock", "1", 10000); } else { alert("Please enable cookies for full website functionality"); } $("#p"+num+" > .btn-group-vertical > a > .lock").attr("hidden", ""); $("#p"+num+" > .btn-group-vertical > a").removeAttr("disabled", ""); } else { console.log("The function doesn't work like that. Try again."); } } if (getUnlocked(3)) { $("#p3 > .btn-group-vertical > a > .lock").attr("hidden", ""); } if (getUnlocked(4)) { $("#p4 > .btn-group-vertical > a > .lock").attr("hidden", ""); } if (getUnlocked(5)) { $("#p5 > .btn-group-vertical > a > .lock").attr("hidden", ""); } function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires="+d.toUTCString(); document.cookie = cname + "=" + cvalue + "; " + expires; } function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } function setDoneBon(num) { if (typeof(Storage) !== "undefined") { localStorage.setItem("bon"+num+"unlock", "1"); } else if (!navigator.cookieEnabled == "false") { setCookie("bon"+num+"unlock", "1", 10000); } else { alert("Please enable cookies for full website functionality"); } } function getDoneBon(num) { if (num === 1) { if (typeof(Storage) !== "undefined") { if (localStorage["c13"] === "1") { return true; } else { return false; } } else if (!navigator.cookieEnabled == "false") { if (getCookie("c13") === "1") { return true; } else { return false; } } else { alert("Please enable cookies for full website functionality"); } } else { if (typeof(Storage) !== "undefined") { if (localStorage["bon"+num+"unlock"] === "1") { return true; } else { return false; } } else if (!navigator.cookieEnabled == "false") { if (getCookie("bon"+num+"unlock") === "1") { return true; } else { return false; } } else { alert("Please enable cookies for full website functionality"); } } } function removeDoneC(num) { if (num === 0) { if (typeof(Storage) !== "undefined") { localStorage.removeItem("tutorial"); } else if (!navigator.cookieEnabled == "false") { setCookie("tutorial", "1", -1); } } else if (typeof(Storage) !== "undefined") { localStorage.removeItem("c"+num); } else if (!navigator.cookieEnabled == "false") { setCookie("c"+num, "1", -1); } } function removeDoneBon(num) { if (typeof(Storage) !== "undefined") { localStorage.removeItem("bon"+num+"unlock"); } else if (!navigator.cookieEnabled == "false") { setCookie("bon"+num+"unlock", "1", -1); } } function bonusesUnlocked() { if (typeof(Storage) !== "undefined") { if (localStorage.c13 === "1") { return true; } else { return false; } } else if (!navigator.cookieEnabled == "false") { if (getCookie("c13") === "1") { return true; } else { return false; } } else { alert("Please enable cookies for full website functionality"); return false; } } function openBonuses() { if (bonusesUnlocked()) { $("#bonModal").modal("toggle"); } else { alert("You have to complete Challenge 13 to unlock the bonus challenges"); } } function openSettings() { $("#settings").modal("toggle"); } var bonon = false; $("#bonModal").on("show.bs.modal", function() { $("#settings").modal("hide"); bonon = true; $("#inapp").modal("hide"); bonon = false; for (var i = 1; i <= 4; i++) { if (getBCDone(i)) { $(".b" + i).removeClass("btn-primary"); $(".b" + i).addClass("btn-success"); $(".b" + i + " > .icon").removeAttr("hidden"); } else if (!getDoneBon(i)) { $(".b" + i).attr("disabled", ""); $(".b" + i + " > .lock").removeAttr("hidden"); } } $('a[disabled]').addClass("not-active"); }); var inon = false; $("#settings").on("show.bs.modal", function() { if (!inon) { $("#bonModal").modal("hide"); $("#inapp").modal("hide"); } }); $("#inapp").on("hide.bs.modal", function() { inappnav = false; if (!bonon) { inon = true; $("#settings").modal("show"); inon = false; } }); function inapp() { if (document.getElementById("amount").value >= 10000 && document.getElementById("ccn").value !== "" && document.getElementById("vendor").value !== "") { if (!getDoneBon(4)) { alert("Bonus level 4 unlocked!!!!"); if (!bonusesUnlocked()) { alert("Bonus challenges will be unlocked after completing Challenge 13"); } setDoneBon(4); } else { alert("You can only unlock Challenge 4 once"); } } else { alert("You have not satisfied the form requirements"); } } var inappnav = false; document.getElementById("inappbtn").addEventListener("click", inapp); document.getElementById("amount").addEventListener("keydown", function(event) { if (event.which === 13) { inapp(); } }); document.getElementById("vendor").addEventListener("focus", function() { document.getElementById("vendorlist").innerHTML = " incl. American Express, Virgin Money, HSBC, NAB, ANZ, Commonwealth, Citi, St George, Westpac, Bankwest, Bendigo, Visa, MasterCard, Diner's Card"; }); document.getElementById("vendor").addEventListener("blur", function() { document.getElementById("vendorlist").innerHTML = ""; }); document.getElementById("ccn").addEventListener("focus", function() { document.getElementById("ccnlist").innerHTML = " e.g. XXXX XXXX XXXX XXX"; }); document.getElementById("ccn").addEventListener("blur", function() { document.getElementById("ccnlist").innerHTML = ""; }); document.getElementById("amount").addEventListener("focus", function() { document.getElementById("amountlist").innerHTML = " from $0 up in USD, direct debit"; }); document.getElementById("amount").addEventListener("blur", function() { document.getElementById("amountlist").innerHTML = ""; }); document.getElementById("openinapp").addEventListener("click", function(){ $("#inapp").modal(); inappnav = true; $("#bonModal").modal("hide"); $("#settings").modal("hide"); }); function getRememberC() { if (typeof(Storage) !== "undefined") { if (localStorage.remc === "false") { return false; } else { return true; } } else if (!navigator.cookieEnabled == "false") { if (getCookie("remc") === "false") { return false; } else { return true; } } else { alert("Please enable cookies for full website functionality"); } } function getRememberB() { if (typeof(Storage) !== "undefined") { if (localStorage.remb === "false") { return false; } else { return true; } } else if (!navigator.cookieEnabled == "false") { if (getCookie("remb") === "false") { return false; } else { return true; } } else { alert("Please enable cookies for full website functionality"); } } if (!getRememberC()) { document.getElementById("remc").checked = false; } if (!getRememberB()) { document.getElementById("remb").checked = false; } function remC() { if (document.getElementById("remc").checked) { if (typeof(Storage) !== "undefined") { localStorage.setItem("remc", "true"); } else if (!navigator.cookieEnabled == "false") { setCookie("remc", "true", 10000); } else { alert("Please enable cookies for full website functionality"); } } else { if (typeof(Storage) !== "undefined") { localStorage.setItem("remc", "false"); } else if (!navigator.cookieEnabled == "false") { setCookie("remc", "false", 10000); } else { alert("Please enable cookies for full website functionality"); } } } function remB() { if (document.getElementById("remb").checked) { if (typeof(Storage) !== "undefined") { localStorage.setItem("remb", "true"); } else if (!navigator.cookieEnabled == "false") { setCookie("remb", "true", 10000); } else { alert("Please enable cookies for full website functionality"); } } else { if (typeof(Storage) !== "undefined") { localStorage.setItem("remb", "false"); } else if (!navigator.cookieEnabled == "false") { setCookie("remb", "false", 10000); } else { alert("Please enable cookies for full website functionality"); } } } function getBCDone(num) { if (typeof(Storage) !== "undefined") { if (localStorage["b"+num] === "1") { return true; } else { return false; } } else if (!navigator.cookieEnabled == "false") { if (getCookie("b"+num) === "1") { return true; } else { return false; } } else { alert("Please enable cookies for full website functionality"); } } function rClick(event) { alert("Bonus level 2 unlocked!!!!"); if (!bonusesUnlocked()) { alert("Bonus challenges will be unlocked after completing Challenge 13"); } event.preventDefault(); setDoneBon(2); document.removeEventListener("contextmenu", rClick, false); } if (!getDoneBon(2)) { document.addEventListener("contextmenu", rClick); } var ctrlcount = 0; var ctrlstart = 0; document.addEventListener("keydown", function (event) { if (event.which === 17 && event.ctrlKey && !getDoneBon(3)) { if (ctrlcount === 0) { ctrlstart = new Date().getTime(); } ctrlcount++; if (ctrlcount === 5) { if ((new Date().getTime()) - ctrlstart < 10000) { setDoneBon(3); alert("Bonus level 3 unlocked!!!!"); if (!bonusesUnlocked()) { alert("Bonus challenges will be unlocked after completing Challenge 13"); } } else { ctrlcount = 0; ctrlstart = 0; } } } else if (event.which === 66) { openBonuses(); } else if (event.which === 83 && !inappnav) { openSettings(); } }); document.getElementById("remc").addEventListener("input", remC); document.getElementById("remb").addEventListener("input", remB); $('a[disabled]').addClass("not-active"); $("#settingsbtn[disabled]").removeAttr("disabled");