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.

            
                  <head>
        <meta charset='utf-8'>
        <title id="titlez">Nathan Lackie's Geometry Coding Assignment 5</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">
        <input id="secret" type="hidden" value="0">
        <!--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>
            <span onclick="changeTitle()" id="titles">Geometry Coding Lesson #5</span>
            <!--progress bar-->
            <img style="display: inline-block; border-style: solid; border-width: 2px;" id="pbar0" src="https://nathanscode.com/assignment5/IMG/PBE.png" width="300px">
            <img style="display: none; border-style: solid; border-width: 2px;" id="pbar1" src="https://nathanscode.com/assignment5/IMG/PB1.png" width="300px">
            <img style="display: none; border-style: solid; border-width: 2px;" id="pbar2" src="https://nathanscode.com/assignment5/IMG/PB2.png" width="300px">
            <img style="display: none; border-style: solid; border-width: 2px;" id="pbar3" src="https://nathanscode.com/assignment5/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-->
                    <!--<input class="checkboxez" id="FSID" type="checkbox" value="Transparent Shapes" name="FS"> No Shape Fill-->
                    <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 nite" >
                        <!--Makes the question tab-->
                        <div id="Question" class="tab-pane fade show active" class="nite">
                            <p style="margin-top: 10px" class="alert alert-primary">
                                Point A is the midpoint of circle A. The radius of circle A is 7in. The measure of angle A is 48&deg;. What is the length of arc BC?
                            </p>
                            <p style="position: absolute; left: 77px; top: 230px"><b>&#9696;</b></p>
                            <p style="position: absolute; left: 32px; top: 265px"><b>&#9696;</b></p>
 							<p><b>Input the answers below (round to the nearest tenth if necessary)</b></p>
 							<div>
	 							<span>
	                                <span style="font-size: 20px;">length BC=</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;">
                                    <span style="margin-left: -5px; margin-right: 0px; padding-left: 0px; padding-right: 0px; font-size: 20px;">in</span>
	                                <button class="btn btn-sm btn-info btn-answer" style="margin-top: -2px; margin-left: 55px" 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>
                                <span>
                                    <span style="font-size: 20px;">mBC=</span>
                                    <input name="answer2a" onchange="readTheCookie()" id="answer2a" maxlength="3" class="form-control mx-sm-1" style="display: inline; width:43px; height:30px; padding-left: 0px !important; margin-left: 0px !important;">
                                    <span style="margin-left: -5px; margin-right: 0px; padding-left: 0px; padding-right: 0px; font-size: 20px;">&deg;</span>
                                    <button class="btn btn-sm btn-info btn-answer" style="margin-top: -2px; margin-left: 109px" 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>
                                <span>
                                    <span style="font-size: 20px;">Area of &#x25B3;ABC=</span>
                                    <input name="answer3a" onchange="readTheCookie()" id="answer3a" maxlength="4" class="form-control mx-sm-1" style="display: inline; width:43px; height:30px; padding-left: 0px !important; margin-left: 0px !important;">
                                    <span style="margin-left: -5px; margin-right: 0px; padding-left: 0px; padding-right: 0px; font-size: 20px;">in<sup>2</sup></span>
                                    <button class="btn btn-sm btn-info btn-answer" style="margin-top: -2px; margin-left: 10px" 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">
                            Placeholder
                        </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>If the point of the central angle of an arc is also the midpoint of a circle (that contains your arc) then the arc is is equal to your central angle.</p>
                            </div>
                            <div id="hintTabN2" style="display: none;" class="alert alert-success">
                                <p>The arc length is just a fraction of your circle's circumference.</p>
                            </div>
                            <div id="hintTabN3" style="display: none;" class="alert alert-success">
                                <p>The area of a sector of a circle is just a fraction of the area of your circle.</p>
                            </div>
                            <div id="hintTabN4w" style="display: none;" class="alert alert-success">
                                <p>The formula for arc length is (Pi*R*2)*A/360, where R is radius, and A is angle measure.<br>The formula for sector area is (Pi*R^2)*A/360, where R is radius, and A is angle measure.</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>
                            <li>Added an option to not fill in shapes (not used in this lesson)</li>
                            <li>Fixed the drawing tool not showing coordinates when the mouse button is held down</li>
                            <li>Fixed bugs with firefox</li>
                            <li>Reworked the answer input section in the question tab (not very noticable on website, but makes it a lot easier for me)</li>
                            <li>Added an apostrophe in the tab title</li>
                        </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="https://nathanscode.com/assignment5/canvas-area.js"></script>
    </body>
            
          
!
            
                          #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();
                }
                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.save();
                //draw!!
                ctx.beginPath();
                //if (document.getElementById('TSID').checked == false) {
                //    ctx.fillStyle = "#fff389"
                //} else {;
                //    ctx.fillStyle = "rgba(255,243,137,.4)"
                //}
                ctx.arc(20*10,10*20,100,0,(360/180)*Math.PI);//48
                //if (document.getElementById('FSID').checked == false) {
                //    ctx.fill();
                //}
                ctx.stroke();
                ctx.restore();
                ctx.beginPath();
                ctx.moveTo(10*20,10*20);
                ctx.lineTo(15*20,10*20);
                ctx.moveTo(10*20,10*20);
                ctx.lineTo(13.4*20,13.7*20);
                ctx.stroke();
                ctx.beginPath();
                ctx.arc(20*10,10*20,3,0,(360/180)*Math.PI);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(20*15,10*20,3,0,(360/180)*Math.PI);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(20*13.4,13.7*20,3,0,(360/180)*Math.PI);
                ctx.fill();
                ctx.save();
                ctx.scale(1, -1);
                ctx.font = "20px Arial";
                ctx.fillText('A',180,0-200);
                ctx.fillText('B',270,-280);
                ctx.fillText('C',310,-195);
                ctx.restore();
                //endraw
                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;"
                }
                if (document.getElementById("hintNumFormId").value == 4) {
                    document.getElementById("hintTabN4").style = "display: block;"
                    document.getElementById("hint-btn").style = "display: none;"
                }
            }
            function render() {
                draw(ctx, ca.view);
                requestAnimationFrame(render);
            }
            //refreshData();
			function refreshData() {
				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)})`;
                });
				setTimeout(refreshData, 10);
			}
            window.onload = () => {
            	//loads the cookies
            	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 trimAnswer = problemAnswer1a.replace(/ /g,'');
                if (trimAnswer == '5.9') {
                    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 trimAnswer = problemAnswer2a.replace(/ /g,'');
                if (trimAnswer == '48') {
                    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 trimAnswer = problemAnswer3a.replace(/ /g,'');
                if (trimAnswer == '20.5') {
                    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('If the point of the central angle of an arc is also the midpoint of a circle (that contains your arc) then the arc is is equal to your central angle.')
                    document.getElementById("hintNumFormId").value = "1";
                }
                if (hintNum == 1) {
                    alert("The arc length is just a fraction of your circle's circumference.")
                    document.getElementById("hintNumFormId").value = "2";
                }
                if (hintNum == 2) {
                    alert('The area of a sector of a circle is just a fraction of the area of your cicle.')
                    document.getElementById("hintNumFormId").value = "3";
                }
                if (hintNum == 3) {
                    alert('The formula for arc length is (Pi*R*2)*A/360, where R is radius, and A is angle measure.\nThe formula for sector area is (Pi*R^2)*A/360, where R is radius, and A is angle measure.')
                    document.getElementById("hintNumFormId").value = "4";
                }
                if (hintNum == 4) {
                    alert('Sorry, no more hints, use the hints tab to see previous hints.')
                }
                if (hintNum > 4) {
                    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("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');
			}
			//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('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)
			}

			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";
			    }
			}
		    function changeTitle() {
		    	if (document.getElementById('secret').value < 4) {
		    		document.getElementById('secret').value = Number(document.getElementById('secret').value)+1
		    	} else {
		    		document.getElementById('titlez').innerHTML = 'Nathia'
		    		document.getElementById('titles').innerHTML = 'Nathia'
		    	}
		    }
            
          
!
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