Tracks progress on the unofficial parkrun position bingo challenge (last two digits of position) with a 10x10 grid visualization and detailed event info.
What is a userscript?
A userscript is a small piece of JavaScript that runs in your browser and enhances specific websites. These scripts work with parkrun event pages, parkrunner profile pages, and results pages, and can be used with any userscript manager including Userscripts, Tampermonkey, Violentmonkey, or any compatible browser extension.
Installation
-
Install a userscript manager for your browser:
- Desktop: Userscripts (Safari), Tampermonkey (Chrome, Firefox, Edge, Opera), or Violentmonkey (Orion)
- iOS: Userscripts (Safari) or Violentmonkey (Orion)
- Android: Install Kiwi Browser, then install Tampermonkey or Violentmonkey from the Chrome Web Store.
- Click the install link below for this script.
- Click “Install” when prompted by your userscript manager.
Install parkrun Position Bingo Challenge
Bookmarklet version
You can also use this script as a bookmarklet (a bookmark whose URL is JavaScript), which can be useful on browsers that support bookmarks but not userscript managers.
Desktop bookmarklet
Drag this link to your bookmarks bar:
parkrun Position Bingo Challenge bookmarklet
{var n,o,i,r,a="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(a)return i=!(o=!0),{s:function(){a=a.call(e)},n:function(){var e=a.next();return o=e.done,e},e:function(e){i=!0,n=e},f:function(){try{o||null==a.return||a.return()}finally{if(i)throw n}}};if(Array.isArray(e)||(a=_unsupportedIterableToArray(e))||t&&e&&"number"==typeof e.length)return a&&(e=a),r=0,{s:t=function(){},n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:t};throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){var n;if(e)return"string"==typeof e?_arrayLikeToArray(e,t):"Map"===(n="Object"===(n={}.toString.call(e).slice(8,-1))&&e.constructor?e.constructor.name:n)||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(e,t):void 0}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=Array(t);n<t;n++)o[n]=e[n];return o}(()=>{var e,t,c=100;function p(){return window.innerWidth<768?{isMobile:!0,container:{padding:"10px",marginTop:"10px"},typography:{heading:"1.1em",stats:"1em",statsSubtext:"0.9em"},grid:{boxSize:28,gapSize:3,cellFontSize:"0.7em",cellPadding:"1px",positionFontSize:"0.9em",eventFontSize:"0.65em",dateFontSize:"0.6em"},button:{padding:"6px 12px",fontSize:"0.9em",marginTop:"10px"}}:{isMobile:!1,container:{padding:"20px",marginTop:"20px"},typography:{heading:"1.3em",stats:"1.2em",statsSubtext:"1em"},grid:{boxSize:100,gapSize:5,cellFontSize:"0.9em",cellPadding:"2px",positionFontSize:"1.2em",eventFontSize:"0.8em",dateFontSize:"0.7em"},button:{padding:"8px 15px",fontSize:"1em",marginTop:"15px"}}}function n(r){for(var e,i,n=p(),t=document.createElement("div"),o=(t.id="positionBingoContainer",t.className="parkrun-position-bingo-container",t.style.width="100%",t.style.maxWidth="1200px",t.style.margin="".concat(n.container.marginTop," auto"),t.style.padding=n.container.padding,t.style.backgroundColor="#2b223d",t.style.borderRadius="8px",t.style.boxShadow="0 2px 4px rgba(0,0,0,0.1)",t.style.color="#e0e0e0",t.style.textAlign="center",document.createElement("h3")),o=(o.textContent="Position Bingo Challenge",o.style.marginBottom=n.isMobile?"8px":"10px",o.style.color="#FFA300",o.style.fontSize=n.typography.heading,t.appendChild(o),document.createElement("div")),o=(o.innerHTML='<div style="font-size: '.concat(n.typography.stats,"; margin-bottom: ").concat(n.isMobile?"8px":"10px",';">')+"<strong>"+r.completedCount+" of "+c+"</strong> positions completed</div>"+'<div style="font-size: '.concat(n.typography.statsSubtext,';">After ')+r.totalEvents+" parkruns</div>",t.appendChild(o),Math.ceil(c/10)),a=n.grid.boxSize,l=n.grid.gapSize,s=document.createElement("div"),d=(s.style.display="grid",s.style.gridTemplateColumns="repeat(".concat(10,", ").concat(a,"px)"),s.style.gridTemplateRows="repeat(".concat(o,", ").concat(a,"px)"),s.style.gap="".concat(l,"px"),s.style.margin="0 auto",s.style.justifyContent="center",0);d<c;d++)(o=>{var e=document.createElement("div"),t=(e.style.boxSizing="border-box",e.style.border="1px solid #666",e.style.borderRadius="4px",e.style.backgroundColor=r.completedPositions[o]?"#FFA300":"#008080",e.style.color="#fff",e.style.textAlign="left",e.style.padding=n.grid.cellPadding,e.style.fontWeight="bold",e.style.fontSize=n.grid.cellFontSize,e.style.cursor=r.completedPositions[o]?"pointer":"default",e.style.aspectRatio="1",document.createElement("div"));t.textContent=o.toString().padStart(2,"0"),t.style.fontSize=n.grid.positionFontSize,t.style.marginBottom=n.isMobile?"2px":"5px",e.appendChild(t),r.completedPositions[o]&&((t=document.createElement("div")).innerHTML='<div style="font-size: '.concat(n.grid.eventFontSize,'; text-align: center;">')+r.completedPositions[o][0].eventName+"<br>"+'<span style="font-size: '.concat(n.grid.dateFontSize,';">')+r.completedPositions[o][0].date+" ("+r.completedPositions[o][0].position+")</span></div>",n.isMobile&&(t.style.display="none"),e.appendChild(t),e.addEventListener("click",function(){var e=p(),t=document.createElement("div"),i=(t.style.position="fixed",t.style.top="0",t.style.left="0",t.style.width="100%",t.style.height="100%",t.style.backgroundColor="rgba(0, 0, 0, 0.5)",t.style.zIndex="999",t.addEventListener("click",function(){document.body.removeChild(t)}),document.createElement("div")),n=(i.style.position="fixed",i.style.top="50%",i.style.left="50%",i.style.transform="translate(-50%, -50%)",i.style.backgroundColor="#2b223d",i.style.color="#fff",e.isMobile?"15px":"20px"),n=(i.style.padding=n,i.style.borderRadius="8px",i.style.boxShadow="0 2px 4px rgba(0,0,0,0.5)",i.style.zIndex="1000",i.style.maxWidth=e.isMobile?"95%":"90%",i.style.maxHeight=e.isMobile?"85%":"80%",i.style.overflowY="auto",i.style.fontSize=e.isMobile?"0.9em":"1em",document.createElement("h4"));n.textContent="Position ".concat(o.toString().padStart(2,"0")),n.style.marginBottom="10px",n.style.color="#FFA300",i.appendChild(n),r.completedPositions[o].forEach(function(e){var t=e.eventName,n=e.date,e=e.position,o=document.createElement("div");o.style.marginBottom="10px",o.innerHTML="<strong>"+t+'</strong><br><span style="font-size: 0.9em;">'+n+" ("+e+")</span>",i.appendChild(o)}),t.appendChild(i),document.body.appendChild(t)})),s.appendChild(e)})(d);return t.appendChild(s),e=t,o=p(),(a=document.createElement("div")).style.marginTop=o.button.marginTop,a.id="position-bingo-download-btn-container",(i=document.createElement("button")).textContent="💾 Save as Image",i.style.padding=o.button.padding,i.style.backgroundColor="#FFA300",i.style.color="#2b223d",i.style.border="none",i.style.borderRadius="4px",i.style.cursor="pointer",i.style.fontWeight="bold",i.style.fontSize=o.button.fontSize,i.addEventListener("mouseover",function(){this.style.backgroundColor="#e59200"}),i.addEventListener("mouseout",function(){this.style.backgroundColor="#FFA300"}),i.addEventListener("click",function(){i.style.display="none",html2canvas(e,{backgroundColor:"#2b223d",scale:2,logging:!1,allowTaint:!0,useCORS:!0}).then(function(e){i.style.display="block";var t=document.createElement("a"),n=(new Date).toISOString().split("T")[0],o=window.location.pathname.split("/")[2]||"parkrunner";t.download="position-bingo-".concat(o,"-").concat(n,".png"),t.href=e.toDataURL("image/png"),t.click()})}),a.appendChild(i),e.appendChild(a),t}(t=(t=document.querySelectorAll("#results"))[t.length-1])?(t=t=n((e=>{var t,n={},o=0,i=_createForOfIteratorHelper(Array.from(e.querySelectorAll("tr")).reverse());try{for(i.s();!(t=i.n()).done;){var r=t.value.querySelectorAll("td");if(!(r.length<5)){var a=r[3].textContent.trim(),l=parseInt(a.slice(-2),10),s=r[0].textContent.trim(),d=r[1].textContent.trim();if(!isNaN(l)&&0<=l&&l<c&&(n[l]||(n[l]=[]),n[l].push({eventName:s,date:d,position:a}),Object.keys(n).length===c))break;o++}}}catch(e){i.e(e)}finally{i.f()}return{completedPositions:n,remainingPositions:Array.from({length:c},function(e,t){return t}).filter(function(e){return!n[e]}),completedCount:Object.keys(n).length,totalEvents:o}})(t)),(e=document.querySelector("h2"))&&e.parentNode&&(e.nextSibling?e.parentNode.insertBefore(t,e.nextSibling):e.parentNode.appendChild(t))):console.log("Results table not found")})();){kind=link}
Mobile bookmarklet
On mobile browsers that let you edit bookmark URLs:
- Copy the JavaScript code below to your clipboard.
- Create a new bookmark for any page.
- Edit the bookmark and replace its URL with the code you copied.
- Navigate to the relevant parkrun page.
- Select the bookmark to run the script.
javascript:function _createForOfIteratorHelper(e,t){var n,o,i,r,a="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(a)return i=!(o=!0),{s:function(){a=a.call(e)},n:function(){var e=a.next();return o=e.done,e},e:function(e){i=!0,n=e},f:function(){try{o||null==a.return||a.return()}finally{if(i)throw n}}};if(Array.isArray(e)||(a=_unsupportedIterableToArray(e))||t&&e&&"number"==typeof e.length)return a&&(e=a),r=0,{s:t=function(){},n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:t};throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){var n;if(e)return"string"==typeof e?_arrayLikeToArray(e,t):"Map"===(n="Object"===(n={}.toString.call(e).slice(8,-1))&&e.constructor?e.constructor.name:n)||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(e,t):void 0}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=Array(t);n<t;n++)o[n]=e[n];return o}(()=>{var e,t,c=100;function p(){return window.innerWidth<768?{isMobile:!0,container:{padding:"10px",marginTop:"10px"},typography:{heading:"1.1em",stats:"1em",statsSubtext:"0.9em"},grid:{boxSize:28,gapSize:3,cellFontSize:"0.7em",cellPadding:"1px",positionFontSize:"0.9em",eventFontSize:"0.65em",dateFontSize:"0.6em"},button:{padding:"6px 12px",fontSize:"0.9em",marginTop:"10px"}}:{isMobile:!1,container:{padding:"20px",marginTop:"20px"},typography:{heading:"1.3em",stats:"1.2em",statsSubtext:"1em"},grid:{boxSize:100,gapSize:5,cellFontSize:"0.9em",cellPadding:"2px",positionFontSize:"1.2em",eventFontSize:"0.8em",dateFontSize:"0.7em"},button:{padding:"8px 15px",fontSize:"1em",marginTop:"15px"}}}function n(r){for(var e,i,n=p(),t=document.createElement("div"),o=(t.id="positionBingoContainer",t.className="parkrun-position-bingo-container",t.style.width="100%",t.style.maxWidth="1200px",t.style.margin="".concat(n.container.marginTop," auto"),t.style.padding=n.container.padding,t.style.backgroundColor="#2b223d",t.style.borderRadius="8px",t.style.boxShadow="0 2px 4px rgba(0,0,0,0.1)",t.style.color="#e0e0e0",t.style.textAlign="center",document.createElement("h3")),o=(o.textContent="Position Bingo Challenge",o.style.marginBottom=n.isMobile?"8px":"10px",o.style.color="#FFA300",o.style.fontSize=n.typography.heading,t.appendChild(o),document.createElement("div")),o=(o.innerHTML='<div style="font-size: '.concat(n.typography.stats,"; margin-bottom: ").concat(n.isMobile?"8px":"10px",';">')+"<strong>"+r.completedCount+" of "+c+"</strong> positions completed</div>"+'<div style="font-size: '.concat(n.typography.statsSubtext,';">After ')+r.totalEvents+" parkruns</div>",t.appendChild(o),Math.ceil(c/10)),a=n.grid.boxSize,l=n.grid.gapSize,s=document.createElement("div"),d=(s.style.display="grid",s.style.gridTemplateColumns="repeat(".concat(10,", ").concat(a,"px)"),s.style.gridTemplateRows="repeat(".concat(o,", ").concat(a,"px)"),s.style.gap="".concat(l,"px"),s.style.margin="0 auto",s.style.justifyContent="center",0);d<c;d++)(o=>{var e=document.createElement("div"),t=(e.style.boxSizing="border-box",e.style.border="1px solid #666",e.style.borderRadius="4px",e.style.backgroundColor=r.completedPositions[o]?"#FFA300":"#008080",e.style.color="#fff",e.style.textAlign="left",e.style.padding=n.grid.cellPadding,e.style.fontWeight="bold",e.style.fontSize=n.grid.cellFontSize,e.style.cursor=r.completedPositions[o]?"pointer":"default",e.style.aspectRatio="1",document.createElement("div"));t.textContent=o.toString().padStart(2,"0"),t.style.fontSize=n.grid.positionFontSize,t.style.marginBottom=n.isMobile?"2px":"5px",e.appendChild(t),r.completedPositions[o]&&((t=document.createElement("div")).innerHTML='<div style="font-size: '.concat(n.grid.eventFontSize,'; text-align: center;">')+r.completedPositions[o][0].eventName+"<br>"+'<span style="font-size: '.concat(n.grid.dateFontSize,';">')+r.completedPositions[o][0].date+" ("+r.completedPositions[o][0].position+")</span></div>",n.isMobile&&(t.style.display="none"),e.appendChild(t),e.addEventListener("click",function(){var e=p(),t=document.createElement("div"),i=(t.style.position="fixed",t.style.top="0",t.style.left="0",t.style.width="100%",t.style.height="100%",t.style.backgroundColor="rgba(0, 0, 0, 0.5)",t.style.zIndex="999",t.addEventListener("click",function(){document.body.removeChild(t)}),document.createElement("div")),n=(i.style.position="fixed",i.style.top="50%",i.style.left="50%",i.style.transform="translate(-50%, -50%)",i.style.backgroundColor="#2b223d",i.style.color="#fff",e.isMobile?"15px":"20px"),n=(i.style.padding=n,i.style.borderRadius="8px",i.style.boxShadow="0 2px 4px rgba(0,0,0,0.5)",i.style.zIndex="1000",i.style.maxWidth=e.isMobile?"95%":"90%",i.style.maxHeight=e.isMobile?"85%":"80%",i.style.overflowY="auto",i.style.fontSize=e.isMobile?"0.9em":"1em",document.createElement("h4"));n.textContent="Position ".concat(o.toString().padStart(2,"0")),n.style.marginBottom="10px",n.style.color="#FFA300",i.appendChild(n),r.completedPositions[o].forEach(function(e){var t=e.eventName,n=e.date,e=e.position,o=document.createElement("div");o.style.marginBottom="10px",o.innerHTML="<strong>"+t+'</strong><br><span style="font-size: 0.9em;">'+n+" ("+e+")</span>",i.appendChild(o)}),t.appendChild(i),document.body.appendChild(t)})),s.appendChild(e)})(d);return t.appendChild(s),e=t,o=p(),(a=document.createElement("div")).style.marginTop=o.button.marginTop,a.id="position-bingo-download-btn-container",(i=document.createElement("button")).textContent="💾 Save as Image",i.style.padding=o.button.padding,i.style.backgroundColor="#FFA300",i.style.color="#2b223d",i.style.border="none",i.style.borderRadius="4px",i.style.cursor="pointer",i.style.fontWeight="bold",i.style.fontSize=o.button.fontSize,i.addEventListener("mouseover",function(){this.style.backgroundColor="#e59200"}),i.addEventListener("mouseout",function(){this.style.backgroundColor="#FFA300"}),i.addEventListener("click",function(){i.style.display="none",html2canvas(e,{backgroundColor:"#2b223d",scale:2,logging:!1,allowTaint:!0,useCORS:!0}).then(function(e){i.style.display="block";var t=document.createElement("a"),n=(new Date).toISOString().split("T")[0],o=window.location.pathname.split("/")[2]||"parkrunner";t.download="position-bingo-".concat(o,"-").concat(n,".png"),t.href=e.toDataURL("image/png"),t.click()})}),a.appendChild(i),e.appendChild(a),t}(t=(t=document.querySelectorAll("#results"))[t.length-1])?(t=t=n((e=>{var t,n={},o=0,i=_createForOfIteratorHelper(Array.from(e.querySelectorAll("tr")).reverse());try{for(i.s();!(t=i.n()).done;){var r=t.value.querySelectorAll("td");if(!(r.length<5)){var a=r[3].textContent.trim(),l=parseInt(a.slice(-2),10),s=r[0].textContent.trim(),d=r[1].textContent.trim();if(!isNaN(l)&&0<=l&&l<c&&(n[l]||(n[l]=[]),n[l].push({eventName:s,date:d,position:a}),Object.keys(n).length===c))break;o++}}}catch(e){i.e(e)}finally{i.f()}return{completedPositions:n,remainingPositions:Array.from({length:c},function(e,t){return t}).filter(function(e){return!n[e]}),completedCount:Object.keys(n).length,totalEvents:o}})(t)),(e=document.querySelector("h2"))&&e.parentNode&&(e.nextSibling?e.parentNode.insertBefore(t,e.nextSibling):e.parentNode.appendChild(t))):console.log("Results table not found")})();