Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              
<html>
    <head>
        <meta charset='utf-8'>
        <title>Nathan Lackies Geometry Coding Assignment 4</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--LIBRARIES (no books though)-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <!--INVISIBLE FORMS-->
        <input id="hintNumFormId" type="hidden" value="0" name="hintNumberForum">
        <input id="xc" type="hidden" value="0" name="xcn">
        <input id="yc" type="hidden" value="0" name="ycn">
        <input id="saveDraw" type="hidden" name="saveDrawN">
        <input id="mouseDown1" type="hidden" value="0" name="mouseDown1N">
        <input id="resetViewrINFOR" type="hidden" value="0" type="hidden" name="resetViewrINFORN">
        <input id="resetValX" type="hidden" value="40" name="resetValXN">
        <input id="scaleer" type="hidden" value="1" name="scaleerN">
        <input id="PBarNumber" type="hidden" value="0" name="PBarN">
        <input id="Answer1NoCheat" type="hidden" value="0" name="Answer1NoCheatN">
        <input id="Answer2NoCheat" type="hidden" value="0" name="Answer2NoCheatN">
        <input id="Answer3NoCheat" type="hidden" value="0" name="Answer3NoCheatN">
        <!--Creates a container for the page to be contained in-->
        <div class="container">
            <h1>
            <!--Makes a hint button-->
            <button type="button" class="btn btn-info btn-md hint-btn" onclick="hintFunc()">Hint</button>
            Geometry Coding Lesson #4
            <!--progress bar-->
            <img style="display: inline-block; border-style: solid; border-width: 2px;" id="pbar0" src="http://localhost/nathanscodel4/IMG/PBE.png" width="300px">
            <img style="display: none; border-style: solid; border-width: 2px;" id="pbar1" src="http://localhost/nathanscodel4/IMG/PB1.png" width="300px">
            <img style="display: none; border-style: solid; border-width: 2px;" id="pbar2" src="http://localhost/nathanscodel4/IMG/PB2.png" width="300px">
            <img style="display: none; border-style: solid; border-width: 2px;" id="pbar3" src="http://localhost/nathanscodel4/IMG/PBC.png" width="300px">
            </h1>
            <div class="row">
                <div class="col-lg-7 left-panel">
                    <!--Makes the canvas area-->
                    <canvas-area id="ca" cartesian="true" resizable="none">
                        <canvas id="c"></canvas>
                    </canvas-area>
                    <!--Makes the Cursor Location show under the grid-->
                    <span id="coords">Cursor Location: (.,.)</span> <b style="display: none;">|</b> <span style="display: none;" id="size">size: ./.</span>
                    <br><input id="OLID" type="checkbox" value="Show Origin Lines" name="OL" checked> Show Origin Lines
                    <input class="checkboxez" id="DMID" type="checkbox" onclick="readTheCookie()" value="Draw Mode" name="DM"> Draw Mode
                    <input class="checkboxez" id="TSID" type="checkbox" value="Transparent Shapes" name="TS"> Transparent Shapes
                    <br><button style="margin-top: 10px" class="btn btn-primary" onclick="clearDraw()">Clear Drawings</button>
                    <button style="margin-top: 10px" class="btn btn-danger" onclick="deleteAllCookies()">Clear Saved Data</button>
                </div>
                <!--Makes the panel on the right-->
                <div class="col-lg-5 right-panel">
                    <ul class="nav nav-pills" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="pill" href="#Question">Question</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="pill" href="#Hints">Hints</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="pill" href="#Code">Code</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="pill" href="#Changelog">Changelog</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <!--Makes the question tab-->
                        <div id="Question" class="tab-pane fade show active">
                            <p class="alert alert-primary">The coordinates of the yellow triangle are<br>
                            A(2 , 2), B(7 , 3), and C(3 , 6)<br>
                            If we dilate the "pre-image" by a factor of 4, with the reference point being the origin, what will the new coordinates be? 
                            </p>
 							<p><b>Input the coordinates of the "image" below</b></p>
 							<div>
	 							<span>
	                                <span style="font-size: 20px;">A'=</span>
	                                (
	                                <input name="answer1a" onchange="readTheCookie()" id="answer1a" maxlength="3" class="form-control mx-sm-1" style="display: inline; width:43px; height:30px; padding-left: 0px !important; margin-left: 0px !important;">
	                                ,
	                                <input onchange="readTheCookie()" name="answer1b" id="answer1b" maxlength="3" class="form-control mx-sm-1" style="display: inline; width:43px; height:30px; padding-left: 0px !important; margin-left: 0px !important;">
	                               	)
	                                <button class="btn btn-sm btn-info btn-answer" style="margin-top: -2px; margin-left: 20px" onclick="checkAnswer()">Check</button>
	                                <p id="answerresults" style="display: inline-block; color: #ededed; margin-top: 0px; width: 100px; margin-left: 10px; margin-bottom: 0px;"></p>
	                            </span>
	                        </div>
	                        <div style="margin-top: 10px">
	                            <span style="margin-top: 10px">
	                            	<span style="font-size: 20px;">B'=</span>
	                                (
	                                <input name="answer2a" onchange="readTheCookie()" maxlength="3" id="answer2a" class="form-control mx-sm-1" style="display: inline; width:43px; height:30px; padding-left: 0px !important; margin-left: 0px !important;">
	                                ,
	                                <input name="answer2b" onchange="readTheCookie()" id="answer2b" maxlength="3" class="form-control mx-sm-1" style="display: inline; width:43px; height:30px; padding-left: 0px !important; margin-left: 0px !important;">
	                                )
		                            <button class="btn btn-sm btn-info btn-answer" style="margin-top: -2px; margin-left: 20px" onclick="checkAnswer2()">Check</button>
		                            <p id="answerresults2" style="display: inline-block; color: #ededed; margin-top: 0px; width: 100px; margin-left: 10px; margin-bottom: 0px;"></p>
	                            </span>
	                        </div>
	                        <div style="margin-top: 10px">
	                        	<span style="margin-top: 10px">
	                        		<span style="font-size: 20px;">C'=</span>
                                    (
                                    <input name="answer3a" id="answer3a" onchange="readTheCookie()" maxlength="3" class="form-control mx-sm-1" style="display: inline; width:43px; height:30px; padding-left: 0px !important; margin-left: 0px !important;">
                                    ,
                                    <input name="answer3b" maxlength="3" id="answer3b" onchange="readTheCookie()" class="form-control mx-sm-1" style="display: inline; width:43px; height:30px; padding-left: 0px !important; margin-left: 0px !important;">
                                    )
                                    <button class="btn btn-sm btn-info btn-answer" style="margin-top: -2px; margin-left: 20px" onclick="checkAnswer3()">Check</button>
									<p id="answerresults3" style="display: inline-block; color: #ededed; margin-top: 0px; width: 100px; margin-left: 10px; margin-bottom: 0px;"></p>
								</span>
							</div>
                        </div>
                        <!--Makes the explanation tab
                        <div id="Explanation" class="tab-pane fade">
                            <div style="border-style: solid; border-color: gray;">
                                <p style="padding:10px">This is an original problem I came up with. There is a yellow triangle which is getting dilated by a factor of 4. You then have to put in the coordinates of the new triangle that is the result of the dilation. If you want more information on how to solve the problem, hit the hints button.</p>
                            </div>
                        </div>-->
                        <!--Makes the code tab-->
                        <div id="Code" class="tab-pane fade">
                            <p data-height="450" data-theme-id="0" data-slug-hash="QQogXL" data-default-tab="js,result" data-user="Naitronbot" data-embed-version="2" data-pen-title="QQogXL" class="codepen">See the Pen <a href="https://codepen.io/Naitronbot/pen/QQogXL/">QQogXL</a> by Nate (<a href="https://codepen.io/Naitronbot">@Naitronbot</a>) on <a href="https://codepen.io">CodePen</a>.</p>
							<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
                        </div>
                        <!--Makes the hints tab-->
                        <div id="Hints" class="tab-pane fade">
                            <br>
                            <div id="noHintMessage" style="display: block;" class="alert alert-danger">
                                <p>You have not used any hints yet, this area shows your previously used hints.</p>
                            </div>
                            <div id="hintTabN1" style="display: none;" class="alert alert-success">
                                <p>The yellow triangle is getting four times larger, with the origin being the reference point, what are the new coordinates.</p>
                            </div>
                            <div id="hintTabN2" style="display: none;" class="alert alert-success">
                                <p>If the triangle is growing four times larger, what should you multiply each point’s location by?</p>
                            </div>
                            <div id="hintTabN3" style="display: none;" class="alert alert-success">
                                <p>Multiply the x and y values of the angles by 4 to get the prime angles.</p>
                            </div>
                            <button id="hint-btn" type="button" class="btn btn-info btn-md hint-btn" onclick="hintFunc()">Get Hint</button>
                        </div>
                        <!--Changelog-->
                        <div id="Changelog" class="tab-pane fade">
                            <br>
                            <h6>Lesson 4, Version 1</h6>
                            <ul class="change-log">
                                <li>Added a drawing tool to help visualize the problem</li>
                                <li>Multiple Answers</li>
                                <li>Made the progress bar multi-step</li>
                                <li>Gave the progress bar a border</li>
                                <li>Added a transparent shapes option</li>
                                <li>Added an option to save progress</li>
                            </ul>
                            <h6>Lesson 4, Version 2</h6>
                            <ul class="change-log">
                                <li>Removed the explanation tab, and the save progress tab</li>
                                <li>Made saving automatic</li>
                                <li>Added a confirmation to clearing saved data</li>
                                <li>Added a warning message when using unsupported web browers</li>
                                <li>Fixed the weird spacing on the answer boxed on Firefox</li>
                                <li>Changed the maximum allowed characters in the input fields from 2 to 3</li>
                                <li>Made the code in the code tab bigger so you can ACTUALLY read it now</li>
                            </ul>
                        </div>
                        <!--Makes the save progress tab
                        <div id="SaveProgress" class="tab-pane fade">
                        	<div style="margin: 10px">
                        		<div style="margin-top: 20px" class="alert alert-primary">
		                        	<p>Click the save progress button below to save your current progress in this lesson. After two days, all saved data will be cleared automatically. Pressing the button again resets the timer. This saves:</p>
		                        	<li>Progress bar progress</li>
		                        	<li>Drawings</li>
		                        	<li>Inputted Answers</li>
		                        </div>
	            				<button style="margin-top: 20px; width: 49%;" type="button" class="btn btn-success btn-md hint-btn" onclick="readTheCookie()">Save Progress</button>
	            				<button style="margin-top: 20px; width: 49%;" type="button" class="btn btn-danger btn-md hint-btn" onclick="deleteAllCookies()">Clear Saved Data</button>
	            			</div>
                        </div>-->
                    </div>
                </div>
            </div>
        </div>
        <script src="http://localhost/nathanscodel4/canvas-area.js"></script>
    </body>
</html>
            
          
!
            
                          #app {
                display: grid;
            }
            canvas-area {
                display: block;
                overflow: hidden;
                background-color:#eee;
                border:solid 1px black;
                width: 100%;
                height: 70vh;    
            }
            
            .right-panel {
                overflow: scroll; 
                height: 70vh;
                background-color: #ededed; 
                border-style: solid;
                border-color: black;
                border-width: 1px;
                padding: 10px; 
                border-radius: 10px;
            }
            
            .change-log li {
                padding-bottom: 5px;
                color: #666666;
            }
            
            .left-panel {
                padding-right: 30px;
            }
            
            .btn-answer {
                margin-top: 6px;
            }
			
			.results {
				padding: 5px;
				font-size: 14px;
			}
			.checkboxez {
				margin-left: 20px
			}

			#voidpadding {
				margin-left: 0px !important;
				margin-right: 0px !important;
				padding-left: 0px !important;
				padding-right: 0px !important;
			}
            
          
!
            
              
            document.getElementById('hintNumFormId').value = '0';
            //sets up variables
            let question1Answer = 0;
            let question2Answer = 0;
            //sets up constants
            const ctx = document.getElementById('c').getContext('2d'),
            ca = document.getElementById('ca'),
            coords = document.getElementById('coords'),
            size = document.getElementById('size'),
            toggleCartesian = (e) => { ca.cartesian = !ca.cartesian };
            //draws stuff on the grid
            function draw(ctx, view) {
                let w = ctx.canvas.width, h = ctx.canvas.height, 
                sz = 20*view.scl, xoff = view.x%sz, yoff = view.y%sz;

                if (ca.cartesian)
                    ctx.setTransform(1,0,0,-1,0.5,h-0.5);
                else
                    ctx.setTransform(1,0,0,1,0.5,0.5);
                ctx.clearRect(0,0,w,h);

                // draw grid ...
                if (view.scl > 0.2) {
                    ctx.strokeStyle = "#ccc";
                    ctx.lineWidth = 1;
                    ctx.beginPath();
                    for (let x=xoff,nx=w+1; x<nx; x+=sz) { ctx.moveTo(x,0); ctx.lineTo(x,h); }
                        for (let y=yoff,ny=h+1; y<ny; y+=sz) { ctx.moveTo(0,y); ctx.lineTo(w,y); }
                            ctx.stroke();
                }
                //draw origin lines
                if (document.getElementById('OLID').checked == true) {
                    ctx.lineWidth = 2;
                    ctx.strokeStyle = "#555"; // origin lines ...
                    ctx.beginPath();
                    ctx.moveTo(view.x,0); ctx.lineTo(view.x,h);
                    ctx.moveTo(0,view.y); ctx.lineTo(w,view.y);
                    ctx.stroke();
                    ctx.closePath();
                }
                ctx.save();
                if (ca.cartesian)
                    ctx.setTransform(view.scl,0,0,-view.scl,view.x+0.5,h-view.y-0.5);
                else
                    ctx.setTransform(view.scl,0,0,view.scl,view.x+0.5,view.y+0.5);
                ctx.beginPath();
                ctx.strokeStyle = "#555";
                ctx.moveTo(40,40);
                ctx.lineTo(140,60);
                ctx.lineTo(60,120);
                ctx.lineTo(40,40);
                if (document.getElementById('TSID').checked == false) {
                	ctx.fillStyle = "#fff389"
            	} else {;
            		ctx.fillStyle = "rgba(255,243,137,.4)"
            	}
                ctx.fill();
                ctx.lineWidth=1;
                ctx.stroke();
                ctx.save();
                ctx.scale(1, -1);
                ctx.fillStyle = "#555";
                ctx.font = "20px Arial";
                ctx.fillText('A',23,-25);
                ctx.fillText('B',145,-50);
                ctx.fillText('C',50,-130);
                ctx.scale(1, -1);
                if (document.getElementById("saveDraw").value != '') {
                	let documentS = document.getElementById("saveDraw").value
                	let splitString = documentS.split(",")
                	let i = 0;
                	let count = 0;
                	for (i = 0; i < splitString.length; i++) {
                		let count0 = splitString[count],
                			count1 = splitString[count+1],
                			count2 = splitString[count+2],
                			count3 = splitString[count+3];
                		ctx.beginPath();
                		ctx.strokeStyle = "#555";
                		ctx.lineWidth=1;
                		ctx.moveTo(count0*20,count1*20);
                		ctx.lineTo(count2*20,count3*20);
                		count = count+4
                		ctx.stroke();
					}
                }
                ctx.restore();

                //defines what the progress bar shows
                if (document.getElementById('PBarNumber').value == 1) {
                	document.getElementById('pbar0').style = "display: none; border-style: solid; border-width: 2px;" 
                	document.getElementById('pbar1').style = "display: inline-block; border-style: solid; border-width: 2px;" 
                }
                if (document.getElementById('PBarNumber').value == 2) {
                	document.getElementById('pbar0').style = "display: none; border-style: solid; border-width: 2px;" 
                	document.getElementById('pbar1').style = "display: none; border-style: solid; border-width: 2px;" 
                	document.getElementById('pbar2').style = "display: inline-block; border-style: solid; border-width: 2px;" 
                }
                if (document.getElementById('PBarNumber').value == 3) {
                	document.getElementById('pbar0').style = "display: none; border-style: solid; border-width: 2px;" 
                	document.getElementById('pbar1').style = "display: none; border-style: solid; border-width: 2px;"
                	document.getElementById('pbar2').style = "display: none; border-style: solid; border-width: 2px;" 
                	document.getElementById('pbar3').style = "display: inline-block; border-style: solid; border-width: 2px;" 
                }

                //Handles if the hints show in the hints 
                if (document.getElementById("hintNumFormId").value == 1) {
                    document.getElementById("noHintMessage").style = "display: none;"
                    document.getElementById("hintTabN1").style = "display: block;"
                }
                if (document.getElementById("hintNumFormId").value == 2) {
                    document.getElementById("hintTabN2").style = "display: block;"
                }
                if (document.getElementById("hintNumFormId").value == 3) {
                    document.getElementById("hintTabN3").style = "display: block;"
                    document.getElementById("hint-btn").style = "display: none;"
                }
            }
            function render() {
                draw(ctx, ca.view);
                requestAnimationFrame(render);
            }
            window.onload = () => {
            	//loads the cookies
            	if (getBrowser() == 'Firefox') {
            		alert('It appears you are using Firefox. For some reason, draw mode may be buggy with Firefox. If you can, please switch to Chrome or Opera. Press OK to ignore this message.')
            	}
            	loadCookies1()
                ca.observe('pointer', e => {
                    let {x,y} = ca.pntToUsr(e), 
                    prec = Math.max(Math.log(ca.view.scl)/Math.log(2), 0);
                    document.getElementById("xc").value = Math.round((x/20));
                    document.getElementById("yc").value = Math.round((y/20));
                    coords.innerHTML = `Cursor Location: (${Math.round((x/20)).toFixed(prec)} , ${Math.round((y/20)).toFixed(prec)})`;
                });
                ca.observe('resize', e => {
                    size.innerHTML = `size: ${e.width} / ${e.height}`;
                });
                ca.resize({width,height}=ca);  // cause single initial notification ..
                render();
            }
            //Checks if the first answer is correct
            function checkAnswer() { 
                let problemAnswer1a = document.getElementById('answer1a').value;
                let problemAnswer1b = document.getElementById('answer1b').value;
                let trimAnswer = problemAnswer1a.replace(/ /g,'') +"."+ problemAnswer1b.replace(/ /g,'');
                if (trimAnswer == '8.8') {
                    document.getElementById("answerresults").innerHTML = "<div class='results alert-success'>Yay! Correct</div>";
                    if (document.getElementById('Answer1NoCheat').value == 0) {
                    	PBarIncreaser()
                    	document.getElementById('Answer1NoCheat').value = 1
                	}
                	readTheCookie()
                } else {
                    document.getElementById("answerresults").innerHTML = "<div class='results alert-danger'>Try Again!</div>";
                    readTheCookie()
                }
            };
            //Checks if the second answer is correct
            function checkAnswer2() { 
                let problemAnswer2a = document.getElementById('answer2a').value;
                let problemAnswer2b = document.getElementById('answer2b').value;
                let trimAnswer2 = problemAnswer2a.replace(/ /g,'') +"."+ problemAnswer2b.replace(/ /g,'');
                if (trimAnswer2 == '28.12') {
                    document.getElementById("answerresults2").innerHTML = "<div class='results alert-success'>Yay! Correct</div>";
                    if (document.getElementById('Answer2NoCheat').value == 0) {
                    	PBarIncreaser()
                    	document.getElementById('Answer2NoCheat').value = 1
                	}
                	readTheCookie()
                } else {
                    document.getElementById("answerresults2").innerHTML = "<div class='results alert-danger'>Try Again!</div>";
                    readTheCookie()
                }
            };
            //Checks if the third answer is correct
            function checkAnswer3() { 
                let problemAnswer3a = document.getElementById('answer3a').value;
                let problemAnswer3b = document.getElementById('answer3b').value;
                let trimAnswer3 = problemAnswer3a.replace(/ /g,'') +"."+ problemAnswer3b.replace(/ /g,'');
                if (trimAnswer3 == '12.24') {
                    document.getElementById("answerresults3").innerHTML = "<div class='results alert-success'>Yay! Correct</div>";
                    if (document.getElementById('Answer3NoCheat').value == 0) {
                    	PBarIncreaser()
                    	document.getElementById('Answer3NoCheat').value = 1
                	}
                	readTheCookie()
                } else {
                    document.getElementById("answerresults3").innerHTML = "<div class='results alert-danger'>Try Again!</div>";
                    readTheCookie()
                }
            };
            //clears the grid of user drawings
            function clearDraw() {
            	document.getElementById("saveDraw").value = ""
            	readTheCookie()
            }
            //increases the progress bar's value
            function PBarIncreaser() {
            	let PBNBER = document.getElementById('PBarNumber').value 
            	if (PBNBER == 0) {
            		document.getElementById('PBarNumber').value = 1
            	}
            	if (PBNBER == 1) {
            		document.getElementById('PBarNumber').value = 2
            	}
            	if (PBNBER == 2) {
            		document.getElementById('PBarNumber').value = 3
            	}
            	if (PBNBER > 3) {
            		alert('Report this bug to Nathan')
            	}
            }
            //Deletes all saved data (stackoverflow is amazing)
			function deleteAllCookies() {
				let deleteConfirm = confirm('Are you sure you want to clear all saved data for this lesson?')
				if (deleteConfirm == true) {
			    	document.cookie.split(";").forEach(function(c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); });
			    }
			}

            //Displays hints when hint button is pressed
            function hintFunc() {
                let hintNum = document.getElementById("hintNumFormId").value;
                if (hintNum == 0) {
                    alert('The yellow triangle is getting four times larger, with the origin being the reference point, what are the new coordinates.')
                    document.getElementById("hintNumFormId").value = "1";
                }
                if (hintNum == 1) {
                    alert('If the triangle is growing four times larger, what should you multiply each point’s location by?')
                    document.getElementById("hintNumFormId").value = "2";
                }
                if (hintNum == 2) {
                    alert('Multiply the x and y values of the angles by 4 to get the prime angles.')
                    document.getElementById("hintNumFormId").value = "3";
                }
                if (hintNum == 3) {
                    alert('Sorry, no more hints, use the hints tab to see previous hints.')
                }
                if (hintNum > 3) {
                    alert('Please report this bug to Nathan, as this message should not appear, unless you edited the code, you hacker.')
                }
            }
            //gets a cookie by name
			function getCookie(cname) {
			    let name = cname + "=";
			    let decodedCookie = decodeURIComponent(document.cookie);
			    let ca = decodedCookie.split(';');
			    for(let i = 0; i <ca.length; i++) {
			        let c = ca[i];
			        while (c.charAt(0) == ' ') {
			            c = c.substring(1);
			        }
			        if (c.indexOf(name) == 0) {
			            return c.substring(name.length, c.length);
			        }
			    }
			    return "";
			}
			//loads all saved data
			function loadCookies1() {
				document.getElementById("answer1a").value = getCookie('Answer1aCook');
				document.getElementById("answer1b").value = getCookie('Answer1bCook');
				document.getElementById("answer2a").value = getCookie('Answer2aCook');
				document.getElementById("answer2b").value = getCookie('Answer2bCook');
				document.getElementById("answer3a").value = getCookie('Answer3aCook');
				document.getElementById("answer3b").value = getCookie('Answer3bCook');
				document.getElementById("saveDraw").value = getCookie('saveDraw');
				document.getElementById("PBarNumber").value = getCookie('PBarNumber');
				document.getElementById("Answer1NoCheat").value = getCookie('Answer1NoCheat');
				document.getElementById("Answer2NoCheat").value = getCookie('Answer2NoCheat');
				document.getElementById("Answer3NoCheat").value = getCookie('Answer3NoCheat');
				document.getElementById("answerresults").innerHTML = getCookie('answerresults');
				document.getElementById("answerresults2").innerHTML	= getCookie('answerresults2');
				document.getElementById("answerresults3").innerHTML	= getCookie('answerresults3');
			}
			//creates a cookie
			function setCookie(cname, cvalue, exdays) {
			    let d = new Date();
			    d.setTime(d.getTime() + (exdays*24*60*60*1000));
			    let expires = "expires="+ d.toUTCString();
			    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
			}
			//saves data
			function readTheCookie() {
                //saves what's in the answer slots
                setCookie('Answer1aCook', document.getElementById('answer1a').value, 2)
                setCookie('Answer1bCook', document.getElementById('answer1b').value, 2)
                setCookie('Answer2aCook', document.getElementById('answer2a').value, 2)
                setCookie('Answer2bCook', document.getElementById('answer2b').value, 2)
                setCookie('Answer3aCook', document.getElementById('answer3a').value, 2)
                setCookie('Answer3bCook', document.getElementById('answer3b').value, 2)
                setCookie('saveDraw', document.getElementById('saveDraw').value, 2)
                setCookie('PBarNumber', document.getElementById('PBarNumber').value, 2)
                setCookie('Answer1NoCheat', document.getElementById('Answer1NoCheat').value, 2)
                setCookie('Answer2NoCheat', document.getElementById('Answer2NoCheat').value, 2)
                setCookie('Answer3NoCheat', document.getElementById('Answer3NoCheat').value, 2)
                setCookie('answerresults', document.getElementById("answerresults").innerHTML, 2)
                setCookie('answerresults2', document.getElementById("answerresults2").innerHTML, 2)
                setCookie('answerresults3', document.getElementById("answerresults3").innerHTML, 2)
			}

			function getBrowser() {
			 	if( navigator.userAgent.indexOf("Chrome") != -1) {
			 		return "Chrome";
				} else if ( navigator.userAgent.indexOf("Opera") != -1 ) {
			    	return "Opera";
			    } else if( navigator.userAgent.indexOf("MSIE") != -1 ) {
			    	return "IE";
			    } else if( navigator.userAgent.indexOf("Firefox") != -1 ) {
			    	return "Firefox";
			    } else {
			    	return "unknown";
			    }
			}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console