<html> <head> <style> /* Make all links look active even when href isn't set. We do this so we can set the onclick attribute instead. */ a { color: #0000EE; text-decoration: underline; cursor: pointer; } a:visited { color: #551A8B; text-decoration: underline; cursor: pointer; } </style> </head> <body> <div id="content"> </div> <script> /* Lukas quickly coded the stuff below. Use at your own risk.... // // This script fakes links to local webpages by replacing instances of href="/pageName.html" with onclick="load(pageName);" // The load(pageName) function replaces content from one webpage with content from another. // // OG pages copied from Course Builder // Example: { 'index.html': '<h1>Hello, World!</h1>' } */ let pageBodies = { 'index.html': '<h3>The Monty Hall Game Show</h3> <p>Choose a door!</p> <a>Door 1</a> <a>Door 2</a> <a>Door 3</a>',
'first-door.html': '<a href="/index.html">Reset</a> <h3>The Monty Hall Game Show</h3> <p>You won nothing!</p> <img src="/img/empty.png">',
'second-door.html': '<a href="/index.html">Reset</a> <h3>The Monty Hall Game Show</h3> <p>You won a car</p> <img src="/img/car.png">',
'third-door.html': '<h3>The Monty Hall Game Show</h3> <p>You won a cat</p> <img src="/img/cat.png">', }; /* // Create a pathToOnClickMapping object where keys are href absolute paths and values are onclick attributes replacing the page's body // Example: { 'href="/trail.html"': 'load(\'trail.html\');' } */ let pathToOnClickMapping = {}; Object.keys(pageBodies).forEach((key) => { pathToOnClickMapping['href="/' + key + '"'] = 'onclick="load(\'' + key + '\');"'; }); let regex = new RegExp(Object.keys(pathToOnClickMapping).join("|"), "gi"); /* // Create a pagesWithAbsolutePathsReplaced object that stores webpage bodies with absolute paths replaced with onclick=load(pageName) */ let pagesWithAbsolutePathsReplaced = {}; Object.keys(pageBodies).forEach((key) => { pagesWithAbsolutePathsReplaced[key] = pageBodies[key].replace(regex, function(matched) { return pathToOnClickMapping[matched]; }); }); /* // Replace content of webpage with page from pagesWithAbsolutePathsReplaced */ function load(pageName) { document.getElementById('content').innerHTML = pagesWithAbsolutePathsReplaced[pageName]; }; load('index.html'); </script> </body> </html>]]>
Make sure to pick href followed by = and then ", ".