{"id":194,"date":"2022-10-19T14:22:11","date_gmt":"2022-10-19T14:22:11","guid":{"rendered":"https:\/\/modelmemath.com\/?page_id=194"},"modified":"2024-10-10T17:20:27","modified_gmt":"2024-10-10T17:20:27","slug":"teacher-dashboard","status":"publish","type":"page","link":"https:\/\/modelmemath.com\/?page_id=194","title":{"rendered":"Teacher Dashboard"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"194\" class=\"elementor elementor-194\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-05eea19 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"05eea19\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f36ae8f\" data-id=\"f36ae8f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7a49cfe elementor-widget elementor-widget-spacer\" data-id=\"7a49cfe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-61b490b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"61b490b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9470831\" data-id=\"9470831\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-16d1771 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"16d1771\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-29276d2\" data-id=\"29276d2\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ae12d50 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"ae12d50\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<html>\n    <head>\n        <script type=\"text\/javascript\" src=\"https:\/\/www.gstatic.com\/charts\/loader.js\"><\/script>\n        <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery.form\/4.3.0\/jquery.form.min.js\"><\/script> \n        <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js\"><\/script> \n        \n    <\/head>\n<body>\n    <div id=\"dashboard\">\n        <div id=\"home\">\n            <div>\n                <h3 id=\"sectionDashTitle\"><\/h3>\n            <\/div>\n            <div>\n                <div id=\"section0\" class=\"sectionBodyForDatabase\">\n                    <div id=\"studentData\">\n                        <p id=\"studentDataP\"><\/p>\n                    <\/div>\n                <\/div>\n                <div id=\"setion0_1\">\n                    <form id=\"studentInfoUpdateForm\" >\n                        <div id=\"sectionTitle\">\n                            <h3 id=\"sectionDashTitle\">Student Info Update<\/h3>\n                        <\/div>\n                \n                        <div id=\"inputForm\">\n                            <div id=\"studentUpdateInput\" style=\"gap:10px;\">\n                                <input id=\"studentNumber\" class=\"inputBox\" placeholder=\"Number\" type=\"text\" name=\"studentNumber\">\n                                <input id=\"studentName\" class=\"inputBox\" placeholder=\"Name\" type=\"text\" name=\"studentName\">\n                                <input id=\"studentPassword\" class=\"inputBox\" placeholder=\"Password\" type=\"password\" name=\"studentPassword\">\n                                <input type=\"hidden\" id =\"teacherUsername\" name=\"teacherUsername\">\n                                <input id=\"Btn\" type=\"submit\" value=\"Insert\/Update\" \/>\n                            <\/div>\n                            <br>\n                            \n                        <\/div>\n                    <\/form>\n                <\/div>\n                <div id=\"setion0_2\">\n                    <form id=\"showGraphForStudentForm\" >\n                        <div id=\"sectionTitle\">\n                            <h3 id=\"sectionDashTitle\">Show Graph For<\/h3>\n                        <\/div>\n                \n                        <div id=\"inputForm\">\n                            <div id=\"showGraphForInput\" style=\"gap:10px;\">\n                                <input id=\"showGraphStudentInputBox\" class=\"inputBox\" placeholder=\"Number\" type=\"text\" name=\"studentNumber\">\n                                <input id=\"showGraphStudentBtn\" type=\"submit\" value=\"Show Graph\" \/>\n                            <\/div>\n                        <\/div>\n                        <br>\n                        <div style=\"display:flex; flex-direction: column; align-content: center;\">\n                            <div id=\"showGraphMessage\">Student Number Not Found<\/div>\n                        <\/div>\n                        <br>\n                    <\/form>\n                <\/div>\n                <div id=\"section1\" class=\"sectionBody\" style=\"display:none;\">\n                    <div>\n                        <p id=\"sectionTitle\">Playtime Stats<\/p>\n                        <p id=\"sectionSubtitle\">Averages of the amount of time the student played.<\/p>\n                    <\/div>\n                    <div id=\"pieGraphs\">\n                        <div>\n                            <p id=\"subtitle\">Averages<\/p>\n                            <div id=\"pieSection\">\n                                <div id=\"pie1\">\n                                   <div id=\"test1\">\n                                       <div id=\"pieFill1\" class=\"circle\">\n                                           <div class=\"center\">\n                                               <div class=\"percent\">\n                                                   <p id=\"perDay\"><\/p>\n                                                   <p>mins<\/p>\n                                               <\/div>\n                                           <\/div>\n                                       <\/div>\n                                   <\/div>\n                                    <p id=\"miniLabel\">Per Day<\/p>\n                                <\/div>\n                                <div id=\"pie2\">\n                                    <div id=\"test2\">\n                                        <div id=\"pieFill2\" class=\"circle\">\n                                            <div class=\"center\">\n                                                <div class=\"percent\">\n                                                   <p id=\"perSession\"><\/p>\n                                                   <p>mins<\/p>\n                                               <\/div>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <p id=\"miniLabel\">Per Session<\/p>\n                                <\/div>\n                                <div id=\"pie3\">\n                                    <div id=\"test3\">\n                                        <div id=\"pieFill3\" class=\"circle\">\n                                            <div class=\"center\">\n                                                <div class=\"percent\">\n                                                   <p id=\"perWeek\"><\/p>\n                                                   <p>mins<\/p>\n                                               <\/div>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <p id=\"miniLabel\">Per Week<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div id=\"lineGraph\">\n                        <div>\n                            <p id=\"subtitle\">Daily Average Playing (minutes)<\/p>\n                            <div style=\"width:100%; height:100%;\" id=\"lineChart\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div id=\"section2\" class=\"sectionBody\" style=\"display:none;\">\n                    <div>\n                        <p id=\"sectionTitle\">World Completion<\/p>\n                        <p id=sectionSubtitle>Analytics on World Completion.<\/p>\n                    <\/div>\n                     <div id=\"progressBars\"> \n                        <div id=\"bars\">\n                            <div>\n                                <label for=\"w1\">World 1: Wind Technician<\/label>\n                            <\/div>\n                            <div id=\"progressSection\">\n                                <progress id=\"w1\" value=\"50\" max=\"100\"><\/progress>\n                                <p id=\"progressLabel1\" class=\"progessLabel\">50%<\/p>\n                            <\/div>\n                        <\/div>\n                        <div id=\"bars\">\n                            <div>\n                                <label for=\"w2\">World 2: Solar Specialist<\/label>\n                            <\/div>\n                            <div id=\"progressSection\">\n                                <progress id=\"w2\" value=\"100\" max=\"100\"><\/progress>\n                                <p id=\"progressLabel2\" class=\"progessLabel\">100%<\/p>\n                            <\/div>\n                        <\/div>\n                        <div id=\"bars\">\n                            <div>\n                                <label for=\"w3\">World 3: Fire Inspector<\/label>\n                            <\/div>\n                            <div id=\"progressSection\">\n                                <progress id=\"w3\" value=\"100\" max=\"100\"><\/progress>\n                                <p id=\"progressLabel3\" class=\"progessLabel\">100%<\/p>\n                            <\/div>\n                        <\/div>\n                        <div id=\"bars\">\n                            <div>\n                                <label for=\"w4\">World 4: Photogrammetrist<\/label>\n                            <\/div>\n                            <div id=\"progressSection\">\n                                <progress id=\"w4\" value=\"68\" max=\"100\"><\/progress>\n                                <p id=\"progressLabel4\" class=\"progessLabel\">68%<\/p>\n                            <\/div>\n                        <\/div>\n                        <div id=\"bars\">\n                            <div>\n                                <label for=\"w5\">World 5: Programmer<\/label>\n                            <\/div>\n                            <div id=\"progressSection\">\n                                <progress id=\"w5\" value=\"20\" max=\"100\"><\/progress>\n                                <p id=\"progressLabel5\" class=\"progessLabel\">20%<\/p>\n                            <\/div>\n                        <\/div>\n                        <div id=\"bars\">\n                            <div>\n                                <label for=\"w6\">World 6: STEM Showcase<\/label>\n                            <\/div>\n                            <div id=\"progressSection\">\n                                <progress id=\"w6\" value=\"10\" max=\"100\"><\/progress>\n                                <p id=\"progressLabel6\" class=\"progessLabel\">10%<\/p>\n                            <\/div>\n                        <\/div>\n                     <\/div> \n                <\/div>\n                <div id=\"section3\" class=\"sectionBody\" style=\"display:none;\">\n                    <div>\n                        <p id=\"sectionTitle\">Tools Usage<\/p>\n                        <p id=\"sectionSubtitle\">Analytics on different actions.<\/p>\n                    <\/div>\n                    <div style=\"width:95%; height:90%; margin:auto;\">\n                        <div id=\"myChart\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <div id=\"flaggedOffPage\">\n        <form id=\"flagForm\">\n            <h3 id=\"sectionTitle\"> Teacher Dashboard coming soon... <\/h3>\n            <div id=\"flagPassword\" style=\"display:flex; flex-direction: column;\">\n             <input id=\"mmPassword\" name=\"mmPassword\" size=15 type=\"text\" placeholder=\"Enter password...\">\n             <input id=\"Btn\" type=\"submit\" value=\"Enter\"\/>\n            <\/div>\n        <\/form>\n    <\/div>\n\n    <div id=\"loginPage\">\n            <form id=\"teacherForm\" >\n                <div id=\"sectionTitle\">\n                    <h3 id=\"sectionDashTitle\">Teacher Sign-In<\/h3>\n                <\/div>\n        \n                <div id=\"inputForm\">\n                    <div id=\"textSection\">\n                        <p id=\"dashSubtitle\">Please enter your username and password.<\/p>\n                        <p id=\"hint\">Your username is your first and last name as one word.<\/p>\n                        <p id=\"hint\">For example: John Doe = <i>JohnDoe<\/i><\/p>\n                    <\/div>\n            \n                    <div id=\"loginInput\" style=\"gap:10px;\">\n                        <input id=\"loginUser\" class=\"inputBox\" placeholder=\"Username\" type=\"text\" name=\"loginUser\">\n                        <input id=\"loginPass\" class=\"inputBox\" placeholder=\"Password\" type=\"password\" name=\"loginPass\">\n                    <\/div>\n            \n                    <div style=\"display:flex; flex-direction: column; align-content: center;\">\n                        <div id=\"loginMessage\">Incorrect Username or Password<\/div>\n                        <input id=\"Btn\" type=\"submit\" value=\"Login\" \/>\n                    <\/div>\n                <\/div>\n        <\/form>\n    \n        <div style=\"display:flex; flex-direction: column;\"> \n            <p id=\"loginSubtitle\">Not yet registered?<\/p>\n            <button id=\"registerButton\" onclick=\"Register()\">Register Here!<\/button>\n        <\/div>\n    <\/div>\n    \n    <div id=\"registrationPage\">\n        <div id=\"registrationForm\">\n            <h3 id=\"sectionTitle\">Welcome to ModelMe!<\/h3>\n            <p id=\"dashSubtitle\">Register below to be able to access the Teacher Dashboard.<\/p>\n            \n            <form id=\"registrationInput\" action=\"https:\/\/modelmemath.org\/backend_code\/sendTeacherData.php\" method=\"post\" target=\"dummyframe\">\n                <label id=\"registrationLabels\" for=\"firstName\">First Name<\/label>\n                <input name=\"firstName\" id=\"firstName\" type=\"text\" size=\"20\" required>\n                        \n                <label id=\"registrationLabels\" for=\"lastName\">Last Name<\/label>\n                <input name=\"lastName\" id=\"lastName\" type=\"text\" required>\n                \n                <label id=\"registrationLabels\" for=\"password\">Password<\/label>\n                <input name=\"password\" id=\"password\" type=\"password\" required>\n                        \n                <label id=\"registrationLabels\" for=\"schoolName\">What school do you teach in?<\/label>\n                <input name=\"schoolName\" id=\"schoolName\" type=\"text\" required>\n                        \n                <label id=\"registrationLabels\" for=\"gradeLevel\">What grade level do you teach?<\/label>\n                <input name=\"gradeLevel\" id=\"gradeLevel\" type=\"number\" min=\"0\" max=\"12\" required>\n                        \n                <label id=\"registrationLabels\" for=\"classNum\">How many classes do you teach?<\/label>\n                <input name=\"classCount\" id=\"classCount\" type=\"number\" min=\"0\" required>\n                    \n                <!--\n                <div id=\"studentInput\"> \n                    <button id=\"registerButton\" type=\"button\" onclick=\"openClassForm()\">Add class information.<\/button>\n                <\/div>\n                -->\n                <br>\n    \n                <input id=\"Btn\" type=\"submit\" value=\"Submit\"\/>\n            <\/form>\n        <\/div>\n    <\/div>\n\n    <!-- This is to handle POST redirect, DO NOT delete -->\n    <iframe name=\"dummyframe\" id=\"dummyframe\" ><\/iframe>\n\n    <script>\n        \/\/style=\"display: none;\"\n        var dashboardFlag = false;\n        var xValues = [\"Accuracy\", \"Time\/Task\", \"Cuts\", \"Hints\"];\n        var yValues = [55, 49, 44, 24];\n        var barColor = \"darkorange\";\n        var currentClassNum = 0;\n        var currentStudentNum = 1;\n        var iterateCount = 0;\n        var sewCount = 0;\n        var freeCutCount = 0;\n        var equalCutCount = 0;\n        var grabCount = 0;\n        var hintCount = 0;\n        var perDay = 0;\n        var perSession = 0;\n        var perWeek = 0;\n        var mon = 0;\n        var tue = 0;\n        var wed = 0;\n        var thu = 0;\n        var fri = 0;\n        var teacherUsername = \"\";\n        var $ = jQuery;\n        \n        $(\"#flagForm\").submit(function (event) {\n           var passwd = document.getElementById(\"mmPassword\").value;\n            if (passwd == \"modelme\") {\n                dashboardFlag = true;\n                document.getElementById(\"loginPage\").style.display = \"block\";\n                document.getElementById(\"flaggedOffPage\").style.display = \"none\";\n            }\n           event.preventDefault();\n        });\n\n        \/\/if (dashboardFlag) {\n            \/\/document.getElementById(\"loginPage\").style.display = \"block\";\n        \/\/}\n        \/\/else {\n            \/\/document.getElementById(\"flaggedOffPage\").style.display = \"block\";\n        \/\/}\n        \n        $(\"#teacherForm\").submit(function(e) {\n            e.preventDefault();\n            \n            var form = $(this);\n            teacherUsername = $(\"#loginUser\").val();\n            sessionStorage.setItem('teacherUsername', teacherUsername);\n            $.ajax({\n                type: \"POST\",\n                url: \"https:\/\/modelmemath.org\/backend_code\/teacherLogin.php\",\n                data: form.serialize(), \/\/ serializes the form's elements.\n                success: function(data)\n                {\n                  console.log(\"The server says: \" + data);\n                  if(data == 1)\n                  {\n                      console.log(\"The server says: \" + data);\n                      LoginOnClick();\n                  }\n                  else\n                  {\n                      document.getElementById(\"loginMessage\").style.display = \"block\";\n                  }\n                }\n            });\n        });\n        \n        $(\"#registrationInput\").submit(function(e) {\n            e.preventDefault();\n            \n            var form = $(this);\n            $.ajax({\n                type: \"POST\",\n                url: \"https:\/\/modelmemath.org\/backend_code\/sendTeacherData.php\",\n                data: form.serialize(), \/\/ serializes the form's elements.\n                success: function(data)\n                {\n                  console.log(\"The server says: \" + data);\n                  RegisterOnClick();\n                }\n            });\n        });\n        \n        $(\"#studentInfoUpdateForm\").submit(function(e) {\n            e.preventDefault();\n            \n            $(\"#teacherUsername\").val(teacherUsername);\n            var form = $(this);\n            $.ajax({\n                type: \"POST\",\n                url: \"https:\/\/modelmemath.org\/backend_code\/ChangeUserPassword.php\",\n                data: form.serialize(), \/\/ serializes the form's elements.\n                success: function(data)\n                {\n                  console.log(\"studentInfoUpdateBeforeIF: \" + data);\n                  if(data == 1)\n                  {\n                      console.log(\"studentInfoUpdateOnDate=1: \" + data);\n                      RefreshStudenInfoArea();\n                  }\n                  else\n                  {\n                      console.log(\"Data failed to insert: \" + data);\n                  }\n                }\n            });\n        });\n        \n        $(\"#showGraphForStudentForm\").submit(function(e) {\n            e.preventDefault();\n            \n            var studentNumber = $(\"#showGraphStudentInputBox\").val();\n            \n            $.ajax({\n                type: \"POST\",\n                url: \"https:\/\/modelmemath.org\/backend_code\/StudentNumberCheck.php\",\n                data: { studentNumber: studentNumber },\n                success: function(data)\n                {\n                  if(data == 1)\n                  {\n                      ShowGraph(studentNumber);\n                      $(\"#showGraphMessage\").css(\"display\", \"none\");\n                  }\n                  else\n                  {\n                      HideGraph();\n                      $('#showGraphMessage').css('display', 'block');\n                  }\n                }\n            });\n        });\n        \n        \/\/window.addEventListener( \"message\",\n            \/\/function (e) {\n                \/\/if(e.origin !== 'https:\/\/modelmemath.com'){ return; } \n                \/\/console.log(e.origin);\n                \/\/console.log('Received message:', event.data);\n                \/\/if(e.origin !== 'https:\/\/modelmemath.org'){ return; }\n                \/\/alert(e.data);\n            \/\/},\n        \/\/false);\n        \n        function ShowGraph(studentNumber) {\n            $.post( \"https:\/\/modelmemath.org\/backend_code\/WorldCompletion.php\",\n            {\n                studentNumber: studentNumber,\n                teacherUsername: teacherUsername\n            },\n            function( data ) {\n                console.log(\"ShowGraph: \" + studentNumber);\n                console.log(\"ShowGraphTeacher: \" + teacherUsername); \n                var dataArray = data.split(\" \");\n                console.log(\"dataArray: \" + dataArray);\n                $(\"#w1\").val(dataArray[0]);\n                $(\"#progressLabel1\").text(dataArray[0]+\"%\");\n                \n                $(\"#w2\").val(dataArray[1]);\n                $(\"#progressLabel2\").text(dataArray[1]+\"%\");\n                \n                $(\"#w3\").val(dataArray[2]);\n                $(\"#progressLabel3\").text(dataArray[2]+\"%\");\n                \n                $(\"#w4\").val(dataArray[3]);\n                $(\"#progressLabel4\").text(dataArray[3]+\"%\");\n                \n                $(\"#w5\").val(dataArray[4]);\n                $(\"#progressLabel5\").text(dataArray[4]+\"%\");\n                \n                $(\"#w6\").val(dataArray[5]);\n                $(\"#progressLabel6\").text(dataArray[5]+\"%\");\n            });\n            \n            \n            $.post( \"https:\/\/modelmemath.org\/backend_code\/BarChart.php\", \n            {\n                studentNumber: studentNumber,\n                teacherUsername: teacherUsername\n            },\n            function( data ) {\n                \/\/alert( \"Load was performed.\" );\n                \n                console.log(\"ShowGraph: \" + studentNumber);\n                console.log(\"ShowGraphTeacher: \" + teacherUsername); \n                var dataArray = data.split(\" \");\n                console.log(\"dataArray: \" + dataArray);\n                iterateCount = dataArray[0];\n                sewCount = dataArray[1];\n                freeCutCount = dataArray[2];\n                equalCutCount = dataArray[3];\n                grabCount = dataArray[4];\n                hintCount = dataArray[5];\n                \n                google.charts.load('current', {packages: ['corechart', 'bar']});\n                google.charts.setOnLoadCallback(drawBar);\n            });\n            \n            $.get( \"https:\/\/modelmemath.org\/backend_code\/PlayTime.php\", function( data ) {\n                \/\/alert( \"Load was performed.\" );\n                \n                var dataArray = data.split(\" \");\n                perDay = dataArray[0];\n                perSession = dataArray[1];\n                perWeek = dataArray[2];\n                mon = Number(dataArray[3]);\n                tue = Number(dataArray[4]);\n                wed = Number(dataArray[5]);\n                thu = Number(dataArray[6]);\n                fri = Number(dataArray[7]);\n                \n                var backgroundCircleFill = \"conic-gradient(#ff8c00 \" +\n                perDay + \"deg, #2596be 0deg)\";\n                $(\"#pieFill1\").css('background', backgroundCircleFill);\n                $(\"#perDay\").text(perDay); \n                \n                backgroundCircleFill = \"conic-gradient(#ff8c00 \" +\n                perSession + \"deg, #2596be 0deg)\";\n                $(\"#pieFill2\").css('background', backgroundCircleFill);\n                $(\"#perSession\").text(perSession);\n                \n                backgroundCircleFill = \"conic-gradient(#ff8c00 \" +\n                perWeek + \"deg, #2596be 0deg)\";\n                $(\"#pieFill3\").css('background', backgroundCircleFill);\n                $(\"#perWeek\").text(perWeek);\n                \n                google.charts.load('current', {packages: ['corechart', 'line']});\n                google.charts.setOnLoadCallback(draw);\n            });\n            \n            \/\/$('#section1').css('display', 'block');\n            $('#section2').css('display', 'block');\n            $('#section3').css('display', 'block');\n        }\n        \n        function HideGraph()\n        {\n            \/\/$('#section1').css('display', 'none');\n            $('#section2').css('display', 'none');\n            $('#section3').css('display', 'none');\n        }\n        \n        function draw() {\n            var data = new google.visualization.arrayToDataTable([\n               ['Day', 'Minutes Played'],\n               ['M', mon],\n               ['Tu', tue],\n               ['W', wed],\n               ['Th', thu],\n               ['F', fri]\n            ]);\n            \n            var view = new google.visualization.DataView(data);\n            view.setColumns([0, 1, {\n                calc: 'stringify',\n                sourceColumn: 1, \n                type: 'string', \n                role: 'annotation'\n            }])\n            \n            var options ={\n            hAxis: {\n                title: 'Day',\n                titleTextStyle: {\n                    italic: false,\n                    bold: true,\n                    fontSize: 15,\n                    color: '01546a'\n                },\n                textStyle: {color: '01546a'},\n                gridlines: {color: '#01546a'}\n             },\n            vAxis: {\n                title: 'Minutes Played',\n                titleTextStyle: {\n                    italic: false,\n                    bold: true,\n                    fontSize: 17,\n                    color: '01546a'\n                },\n                gridlines: {color: '#01546a'}\n            },\n            backgroundColor: { fill: 'transparent' },\n            width: '390',\n            lineWidth: '3',\n            pointSize: '7',\n            colors: ['#ff8c00', '01546a'],\n            legend: { position: 'none' },\n        };\n        \n            var chart = new google.visualization.LineChart(document.getElementById(\"lineChart\"));\n            chart.draw(data, options);\n        } \n        \n        function drawBar() {\n            var data = new google.visualization.arrayToDataTable([\n                ['Category', 'Value'],\n                ['Iterates', parseInt(iterateCount)],\n                ['Combines', parseInt(sewCount)], \n                ['Free Cuts', parseInt(freeCutCount)],\n                ['Equal Cuts', parseInt(equalCutCount)], \n                ['Grabs', parseInt(grabCount)], \n                ['Hints', parseInt(hintCount)] \n                ]);\n            var options = {\n                hAxis: \n                {\n                    titleTextStyle: {\n                        italic: false,\n                        bold: true,\n                        fontSize: 12,\n                        color: '01546a'\n                    },\n                    textStyle: {color: '01546a'},\n                    gridlines: {color: '#01546a'}\n                },\n                vAxis: {\n                    title:'Button Press Count',\n                    viewWindow: {max: '200'},\n                    titleTextStyle: {\n                        italic: false,\n                        bold: true,\n                        fontSize: 17,\n                        color: '01546a',\n                    },\n                    gridlines: {color: '#01546a'}\n                },\n                colors: ['#ff8c00', '#01546a'],\n                legend: { position: 'none' },\n                backgroundColor: { fill: 'transparent' },\n                height: '450',\n                width: '600',\n                chartArea: {height: '90%', width: '80%', left: '3.5%', top: '5%'}\n            };\n            \n            var container = document.getElementById('myChart');\n            var chart = new google.visualization.ColumnChart(container);\n            google.visualization.events.addListener(chart, 'ready', function() {\n                container.className=\"\";\n            });\n            chart.draw(data, options);\n        }\n        \n        function RefreshStudenInfoArea() {\n            $.ajax({\n                type: \"POST\",\n                url: \"https:\/\/modelmemath.org\/backend_code\/userData.php\",\n                data: {\"loginTeacher\" : teacherUsername},\n                success: function(data)\n                {\n                  console.log(\"RefreshStudenInfoArea: \" + data);\n                  document.getElementById(\"studentDataP\").innerHTML = data;\n                }\n            });\n        }\n        \n        function LoginOnClick() {\n            \/\/teacherUsername = document.getElementById(\"loginUser\").value.toLowerCase();\n            teacherUsername = document.getElementById(\"loginUser\").value;\n            document.getElementById(\"loginPage\").style.display = \"none\";\n            document.getElementById(\"sectionDashTitle\").innerHTML = \"Welcome, \" + teacherUsername +\"!\";\n            document.getElementById(\"home\").style.display = \"block\";\n            \n            RefreshStudenInfoArea();\n        }\n        \n        function RegisterOnClick() {\n            document.getElementById(\"loginPage\").style.display = \"block\";\n            document.getElementById(\"registrationPage\").style.display = \"none\";\n            \n            \/\/var regForm = document.getElementById(\"registrationInput\");\n            \/\/regForm.submit();\n        }\n        \n        function Register() {\n            document.getElementById(\"loginPage\").style.display = \"none\";\n            document.getElementById(\"registrationPage\").style.display = \"block\";\n        }\n        \n        function addStudent(classNum) {\n            var studentId = 'studentForClass' + classNum\n            const template=`\n            <label for=\"lname\">Student ${++currentStudentNum} Full Name:<\/label>\n            <input name=\"lname\" id=\"studentForClass${currentClassNum}\" type=\"text\">`;\n            \n            var relation = document.getElementById(studentId).parentElement;\n            relation.insertAdjacentHTML(\"beforeend\", template);\n        }\n        \n        function addClass(relation) {\n            currentClassNum += 1;\n            currentStudentNum = 1;\n            \n            const template=`\n            <div id='class${currentClassNum}' style=\"display:flex; flex-direction: column;\">\n            <p id=\"classTitle\">Class ${currentClassNum}:<p>\n            <span id='roster${currentClassNum}'>\n            <label for=\"lname\">Student 1 Full Name:<\/label>\n            <input name=\"lname\" id=\"studentForClass${currentClassNum}\" type=\"text\">\n            <\/span>\n            <button id=\"addStudentBtn\" onclick=\"addStudent(${currentClassNum})\">Add Student<\/button>\n            <\/div>\n            `;\n            \n            relation.insertAdjacentHTML(\"beforeend\", template);\n        }\n        \n        function openClassForm() {\n            classNumber = document.getElementById(\"classCount\").value;\n            \n            if (classNumber > 0 && currentClassNum < classNumber) {\n                console.log(classNumber);\n                var relation = document.getElementById(\"registrationLabels\").parentElement;\n                addClass(relation);\n            }\n        }\n        \n        \/\/ Change Student's Password \n        function SubmitForm() {\n            var loginForm = document.getElementById(\"loginForm\");\n            loginForm.action=\"https:\/\/modelmemath.org\/ backend_code\/ChangeUserPassword.php\";\n            loginForm.target=\"resultIframe\";\n            loginForm.loginTeacher.value = teacherUsername;\n            loginForm.submit();\n        }\n        \n        \/\/ Refresh Student Data \n        function RefreshOnClick() {\n            var loginForm = document.getElementById(\"loginForm\");\n            loginForm.action=\"https:\/\/modelmemath.org\/backend_code\/userData.php\";\n            loginForm.target=\"studentDataGrid\";\n            loginForm.loginTeacher.value = teacherUsername;\n            loginForm.submit();\n        }\n    <\/script>\n\n    <style>\n        form div {\n            display:flex;\n            justify-content:center;\n        }\n        #registerTitle{\n            display: flex;\n            text-align: center;\n        }\n        #registerButton, #addStudentBtn {\n            display: flex;\n            justify-content: center;\n            border: none;\n            padding-top: 0px;\n            padding-bottom: 10px;\n            border-color: transparent;\n            background-color: transparent;\n            text-decoration: underline;\n            color: black;\n        }\n        #home, #teacherUsername {\n            display: none;\n        }\n        #registrationPage {\n            display: none;\n        }\n        #textSection {\n            display: flex;\n            flex-direction: column;\n            text-align: center;\n            margin-bottom: 10px;\n        }\n        #wrapper, #loginMessage, #showGraphMessage {\n            width: 300px;\n            height: 35px;\n            align: center;\n            margin: 0 auto;\n        }\n        #loginMessage {\n            display: none;\n            border-style:none;\n        }\n        #showGraphMessage {\n            display: none;\n            border-style:none;\n        }\n        #loginInput {\n            display: flex;\n            flex-direction: column;\n            margin: 0px 100px;\n        }\n        #mmPassword {\n            margin: auto;\n        }\n        #registrationForm {\n            display: flex;\n            flex-direction: column;\n            background: #b8e4f4;\n            border-radius: 5px;\n            border-width: 0px;\n            margin: 10px 250px;\n            align-content: center;\n        }\n        #registrationInput {\n            display: flex;\n            flex-direction: column;\n            align-content: center;\n            margin: 20px 150px;\n        }\n        #hint {\n            margin:0px 20px;\n            text-align: center;\n        }\n        #flagPassword {\n            margin: 50px;\n            gap: 10px;\n            height: 50px;\n        }\n        #flaggedOffPage {\n            display: none;\n        }\n        #registrationLabels {\n            display: flex;\n            flex-direction: column;\n            align-content: center;\n            text-align: center;\n            padding-top: 10px;\n        }\n        #studentInput {\n            margin: 30px 0px;\n        }\n        #classTitle{\n            padding: 10px 0px;\n        }\n        #lineGraph {\n            margin-top: 10px;\n        }\n        #loginPage {\n            display: block;\n            background: #b8e4f4;\n            border-radius: 5px;\n            border-width: 0px;\n            margin: 10px 300px;\n            justify-content: center;\n        }\n        h5 {\n            font-weight: normal;\n        }\n        .sectionBodyForDatabase {\n            width: 60%;\n            height: 300px;\n            border: 0px;\n            background: #b8e4f4;\n            border-radius: 5px;  \n            padding: 10px;\n            margin-left:200px;\n        }\n        .sectionBody {\n            width: 48%; \n            height: 600px;\n            border: 0px;\n            background: #b8e4f4;\n            border-radius: 5px;  \n            padding: 10px; \n        }\n        #section0 {\n            float:center;\n            overflow-y: scroll;\n        }\n        #section1 {\n            float:left;\n            margin-left:15px;\n        }\n        #section2 {\n            float:left;\n            margin-left:15px;\n        }\n        #section3 {\n            float:right;\n            margin-right:15px;\n        }\n        #sectionTitle\n        {\n            text-align: center;\n            color: #01546a;\n            margin-bottom: 0px;\n        }\n        .circle {\n            border-radius: 50%;\n            background: #2596be;\n            width: 100px;\n            height: 100px;\n            margin: auto;\n            margin-bottom: 20px;\n            top: 50%;\n            left: 50%;\n        }\n        #pieFill1 {\n            background: conic-gradient(#ff8c00 200deg, #2596be 0deg);\n            width: 100px;\n            height: 100px;\n            margin: auto;\n            margin-bottom: 20px;\n            top: 50%;\n            left: 50%;\n        }\n        #pieFill2 {\n            background: conic-gradient(#ff8c00 100deg, #2596be 0deg);\n            width: 100px;\n            height: 100px;\n            margin: auto;\n            margin-bottom: 20px;\n            top: 50%;\n            left: 50%;\n        }\n        #pieFill3 {\n            background: conic-gradient(#ff8c00 300deg, #2596be 0deg);\n            width: 100px;\n            height: 100px;\n            margin: auto;\n            margin-bottom: 20px;\n            top: 50%;\n            left: 50%;\n        }\n        .center {\n            border-radius: 50%;\n            background: #b8e4f4;\n            width: 80px;\n            height: 80px;\n            margin: auto;\n            margin-bottom: 20px;\n            margin-top:10px;\n            top: 60%;\n            left: 60%;\n        }\n        #subtitle {\n            text-align: center;\n            color: #01546a;\n            font-weight: 500;\n        }\n        #pieGraphs {\n            margin-bottom: 40px;\n        }\n        #pieSection {\n            display: grid;\n            grid-template-columns: 1fr 1fr 1fr;\n        }\n        #test1, #test2, #test3 {\n            display: flex;\n            width: 100%;\n            height: 100%;\n            margin: auto;\n            justify-content: center;\n        }\n        #miniLabel {\n            color: #01546a;\n            font-size: 15px;\n            text-align: center;\n            font-weight: 600;\n        }\n        .percent {\n            color: #01546a;\n            font-size: 17px;\n            text-align: center;\n            padding-top: 15%;\n            height: 100%;\n            font-weight: 600;\n        }\n        #sectionSubtitle {\n            color:  #01546a;\n            font-size: 15px;\n            text-align: center;\n            margin-top: 3px;\n            margin-bottom: 0px;\n        }\n        #progressSection {\n            display: flex;\n        }\n        #myChart {\n            margin: auto;\n            height: 100%;\n        }\n        progress{\n            width: 90%;\n            height: 35px;\n            border-radius: 5px;\n            height: 23px;\n            padding-top: 3px;\n        }\n        progress::-webkit-progress-value {\n            background-color: #ff8c00;\n            border-radius: 10px;\n            height:20px;\n        }\n        progress::-webkit-progress-bar {\n            background-color: #2596be;\n            border-radius: 10px;\n        }\n        label{\n            font-size:17px;\n            color: #01546a;\n        }\n        .progessLabel{\n            font-size: 15px;\n            padding-left: 3px;\n            padding-bottom: 8px;\n            color:  #01546a;\n            align-content: center;\n            width: 10%;\n        }\n        #progressBars {\n            margin-right: 15px;\n            margin-left: 15px;\n        }\n        #progressBars, label, progress\n        {\n           display: block;\n        }\n        #label {\n            padding-top:0px;\n            text-align: center;\n            color: #01546a;\n        }\n        #inputForm {\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n        #studentNumber {\n            margin-left: 40px;\n        }\n        #showGraphStudentInputBox {\n            margin-left: 300px;\n        }\n        #Btn {\n            height: auto;\n            align-content: center;\n            justify-content: center;\n            color: #42b9f5;\n            padding: 10px 30px;\n            background-color: black;\n            border-radius: 20px;\n            margin: auto;\n        }\n        #showGraphStudentBtn {\n            height: auto;\n            align-content: center;\n            justify-content: center;\n            color: #42b9f5;\n            padding: 10px 30px;\n            background-color: black;\n            border-radius: 20px;\n            margin: auto;\n            margin-right: 300px;\n        }\n        #passInput {\n            margin-left: 30px;\n        }\n        #sectionTitle, #sectionDashTitle {\n            padding-top: 10px;\n            font-size: 25px;\n            font-weight: 600;\n            text-decoration:underline; \n            padding-bottom:0px;\n            text-align: center;\n        }\n        #sectionDashTitle {\n            padding-bottom: 30px;\n            font-size: 30px;\n            font-weight: 400;\n            padding-top: 30px;\n        }\n        #passwordlabelAndInput {\n            padding-top:20px; \n            padding-bottom:30px;\n        }\n        #dashSubtitle {\n            padding: 20px;\n            text-align: center;\n        }\n        #loginSubtitle, #Error {\n            text-align: center;\n            padding-top: 30px;\n        }\n        #Error {\n            text-align: center;\n            padding: 10px 0px;\n            color: red;\n            font-weight: 600;\n        }\n    <\/style>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e83390 elementor-widget elementor-widget-spacer\" data-id=\"1e83390\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7a6226d elementor-widget elementor-widget-image\" data-id=\"7a6226d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"115\" height=\"128\" src=\"https:\/\/modelmemath.com\/wordpress\/wp-content\/uploads\/2022\/03\/Cloud.png\" class=\"attachment-large size-large wp-image-15\" alt=\"\" style=\"width:100%;height:111.3%;max-width:115px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c522b5f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c522b5f\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0b0ce17\" data-id=\"0b0ce17\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-24f6404 elementor-widget elementor-widget-spacer\" data-id=\"24f6404\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Student Info Update Show Graph For Student Number Not Found Playtime Stats Averages of the amount of time the student played. Averages mins Per Day mins Per Session mins Per Week Daily Average Playing (minutes) World Completion Analytics on World Completion. World 1: Wind Technician 50% World 2: Solar Specialist 100% World 3: Fire Inspector&hellip; <a class=\"more-link\" href=\"https:\/\/modelmemath.com\/?page_id=194\">Continue reading <span class=\"screen-reader-text\">Teacher Dashboard<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-194","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/modelmemath.com\/index.php?rest_route=\/wp\/v2\/pages\/194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/modelmemath.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/modelmemath.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/modelmemath.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/modelmemath.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=194"}],"version-history":[{"count":1655,"href":"https:\/\/modelmemath.com\/index.php?rest_route=\/wp\/v2\/pages\/194\/revisions"}],"predecessor-version":[{"id":2469,"href":"https:\/\/modelmemath.com\/index.php?rest_route=\/wp\/v2\/pages\/194\/revisions\/2469"}],"wp:attachment":[{"href":"https:\/\/modelmemath.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}