<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>CodeFeed</h3> <a href="/markup-quiz.html">HTML Quiz</a>',
'markup-quiz.html': '<h3>What HTML Element are you?</h3> <p>H1 element</p> <input type="checkbox"> <p>Paragrah element</p> <input type="checkbox"> <p>Line break element</p> <input type="checkbox">',
}; /* // 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>]]>