{"id":834,"date":"2017-09-22T20:14:23","date_gmt":"2017-09-22T20:14:23","guid":{"rendered":""},"modified":"2022-09-06T04:01:00","modified_gmt":"2022-09-06T04:01:00","slug":"srl04p","status":"publish","type":"post","link":"https:\/\/myedme.com\/login\/srl04p\/","title":{"rendered":"Question #17"},"content":{"rendered":"\n<!doctype html>\n<html>\n\n<head>\n    <title>Sample Video Item Type<\/title>\n    <meta charset='utf-8'>\n    <style type=\"text\/css\">\n        header {\n            height: 70px;\n        }\n\n        .main-controls {\n            padding-bottom: 0.7rem;\n            height: 170px;\n        }\n\n        .sound-clips {\n            box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.7);\n            background-color: rgba(0, 0, 0, 0.1);\n            height: calc(100% - 240px - 0.7rem);\n            overflow: scroll;\n        }\n\n        label {\n            font-family: 'NotoColorEmoji';\n            font-size: 3rem;\n            position: absolute;\n            top: 2px;\n            right: 3px;\n            z-index: 5;\n            cursor: pointer;\n        }\n\n        input[type=checkbox] {\n            position: absolute;\n            top: -100px;\n        }\n\n        aside {\n            position: fixed;\n            top: 0;\n            left: 0;\n            text-shadow: 1px 1px 1px black;\n            width: 100%;\n            height: 100%;\n            transform: translateX(100%);\n            transition: 0.6s all;\n            background-color: #999;\n            background-image: linear-gradient(to top right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));\n        }\n\n        input[type=checkbox]:checked~aside {\n            transform: translateX(0);\n        }\n    <\/style>\n<\/head>\n\n<body>\n    <div class=\"row\">\n        <h2>If you were given another chance to do a similar math problem, what would you need to do to do well?<\/h2>\n        <p>Describe your strategy. You may type in the space below or use your device to record and upload a voice\n            recording.<\/p><br><br>\n        <form action=\"http:\/\/www.myedme.com\/login\/wp-admin\/admin-post.php\" method=\"post\">\n            <input type=\"text\" id=\"stem\" name=\"stem\"\n                value=\"Describe your strategy. You may type in the space below or use your device to record and upload a voice recording.\"\n                style=\"display: none\">\n            <input type=\"text\" name=\"score1\" id=\"score1\" value=\"88\" style=\"display: none\">\n            <input type=\"text\" name=\"questionNum\" id=\"questionNum\" value=\"6\" style=\"display: none\">\n            <input type=\"text\" name=\"chapterName\" id=\"chapterName\" value=\"Set4_3problems\"\n                style=\"display: none\">\n            <input type=\"text\" id=\"queId\" name=\"queId\" value=\"SRL04p\" style=\"display: none\">\n            <input type=\"text\" name=\"contextGrp1\" id=\"contextGrp1\" value=\"AdaptiveInference\" style=\"display: none\">\n            <input type=\"text\" id=\"contextGrp2\" name=\"contextGrp2\" value=\"undefined\" style=\"display: none\">\n            <input type=\"text\" id=\"keys1\" name=\"keys1\" value=\" \" style=\"display: none\">\n            <input type=\"text\" name=\"keys2\" id=\"keys2\" value=\"\" style=\"display: none\">\n            <input type=\"text\" id=\"answerId\" name=\"answerId\" value=\"\" style=\"display: none\">\n            <input type=\"text\" id=\"queFormat\" value=\"3\" name=\"queFormat\" style=\"display: none\">\n            <input type=\"hidden\" name=\"action\" value=\"edme_score_function\">\n            <input type=\"text\" id=\"nextAddress\" name=\"nextAddress\" value=\"http:\/\/www.myedme.com\/login\/SRL04_Feedback\"\n                style=\"display: none\">\n            <input type=\"text\" id=\"stuAns3\" name=\"stuAns3\" value=\"\" size=\"145\">\n            <input type=\"text\" id=\"stuAns2\" name=\"stuAns2\" value=\"99\" style=\"display: none\">\n            <input type=\"text\" name=\"score2\" id=\"score2\" value=\"99\" style=\"display: none\">\n            <tr>\n                <td><br \/><\/td>\n            <\/tr>\n            <input type=\"text\" id=\"publicKey1\" name=\"publicKey1\"\n                value=\"Your answer is not on our list. But, we are still determining all possible correct answers.\"\n                style=\"display: none\">\n            <input type=\"text\" id=\"publicKey2\" name=\"publicKey2\"\n                value=\"Your evidence is not on our list. But, we are still determining all possible correct answers.\"\n                style=\"display: none\">\n            <input type=\"submit\" id=\"Next-Question\" value=\"Next Question\">\n        <\/form>\n\n        <p><\/p>\n        <!--       <div class=\"wrapper\">-->\n        <section class=\"main-controls\">\n            <canvas class=\"visualizer\" height=\"60px\"><\/canvas>\n            <div id=\"buttons\">\n                <button class=\"record\">Record<\/button>\n                <button class=\"stop\">Stop<\/button>\n            <\/div>\n        <\/section>\n        <p id=\"successText\" style=\"display: hidden;\">Thanks! You can play the clip or move to the next question below.\n        <\/p>\n        <section class=\"sound-clips\">\n\n\n        <\/section>\n\n        <!--        <\/div>-->\n\n        <label for=\"toggle\">\u2754<\/label>\n        <input type=\"checkbox\" id=\"toggle\">\n        <aside>\n            <h2>Thank you!<\/h2>\n        <\/aside>\n\n\n    <\/div>\n    <input type=\"button\" name=\"NextPage\" id=\"NextPage\" style=\"float : right; font-size : 20px;\"\n        onclick=\"location.href='https:\/\/myedme.com\/login\/SRL04_Feedback'\" value=\"  Next Page  \">\n<\/body>\n\n<\/html>\n<script>\n    (function () {\n        console.log(\"trace 1\");\n        var audioCtx = null;\n        var canvas = null;\n        var recond = null;\n        var stop = null;\n        var soundClips = null;\n        var canvasCtx = null;\n\n        function startup() {\n            console.log(\"trace 2\");\n            successText = document.querySelector('.successText');\n            record = document.querySelector('.record');\n            stop = document.querySelector('.stop');\n            soundClips = document.querySelector('.sound-clips');\n            canvas = document.querySelector('.visualizer');\n            canvasCtx = canvas.getContext(\"2d\");\n            const mainSection = document.querySelector('.main-controls');\n            let audioCtx;\n            console.log(\"trace 3\");\n            record.style.backgroundColor = \"green\";\n            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {\n                console.log('getUserMedia supported.');\n                navigator.mediaDevices.getUserMedia(\n                    \/\/ constraints - only audio needed for this app\n                    {\n                        audio: true\n                    })\n\n                    \/\/ Success callback\n                    .then(function (stream) {\n                        var options = {\n                            mimeType: 'audio\/webm; codecs=opus'\n                        }\n                        const mediaRecorder = new MediaRecorder(stream, options);\n                        visualizeAudio(stream);\n\n                        m = mediaRecorder;\n                        console.log(\"Media Type\" + m.mimeType);\n                        record.onclick = function () {\n                            mediaRecorder.start();\n                            console.log(mediaRecorder.state);\n                            console.log(\"recorder started\");\n                            record.style.background = \"grey\";\n                            record.style.color = \"black\";\n                            stop.style.backgroundColor = \"green\";\n                            const interval = setInterval(function () {\n                                \/\/ method to be executed;\n                            }, 45000);\n\n                            clearInterval(interval); \n                        }\n\n                        let chunks = [];\n\n                        mediaRecorder.ondataavailable = function (e) {\n                            chunks.push(e.data);\n                        }\n\n                        stop.onclick = function () {\n                            stop.style.backgroundColor = \"gray\";\n                            mediaRecorder.stop();\n                            console.log(mediaRecorder.state);\n                            console.log(\"recorder stopped\");\n                            record.style.background = \"\";\n                            record.style.color = \"\";\n\n                        }\n\n                        mediaRecorder.onstop = function (e) {\n                            console.log(\"recorder stopped in onstopped function\");\n                            record.style.backgroundColor = \"gray\";\n\n                            \/\/const clipName = prompt('Enter a name for your sound clip?', 'My unnamed clip');\n                            const clipName = \"SRL04P_AdaptiveInference\";\n                            const clipContainer = document.createElement('article');\n                            const clipLabel = document.createElement('p');\n                            const audio = document.createElement('audio');\n                            \/\/   const audio2 = document.createElement('audio'); \/\/delete\n                            const deleteButton = document.createElement('button');\n\n                            clipContainer.classList.add('clip');\n                            audio.setAttribute('controls', '');\n                            if (deleteButton) {\n                                deleteButton.innerHTML = \"Delete\";\n\n                                deleteButton.onclick = function (e) {\n                                    let evtTgt = e.target;\n                                    evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);\n                                }\n                            }\n                            clipLabel.innerHTML = clipName;\n\n                            clipContainer.appendChild(audio);\n                            clipContainer.appendChild(clipLabel);\n                            clipContainer.appendChild(deleteButton);\n                            soundClips.appendChild(clipContainer);\n\n                            const blob = new Blob(chunks, {\n                                'type': 'audio\/webm; codecs=opus'\n                            });\n                            chunks = [];\n                            const audioURL = window.URL.createObjectURL(blob);\n                            \/\/let audioFile = await fetch(audioURL).then(r => r.blob()).then(blobFile => new File([blobFile], \"SRL04_AdaptiveInference\", { type: \"audio\/ogg\" })\n                            console.log(audioURL);\n                            console.log(blob);\n                            var reader = new window.FileReader();\n                            var base64 = \"\";\n                            reader.readAsDataURL(blob);\n                            reader.onloadend = function () {\n                                base64 = reader.result;\n                                \/\/base64 = base64.split(',')[1];\n                                console.log(base64);\n                                let audioData = new FormData();\n                                audioData = {\n                                    'publicKey2': 'saving link for stuAns 2',\n                                    'publicKey1': 'saving link for stuAns 1',\n                                    'stuAns1': 'audioLink',\n                                    'stuAns2': '88',\n                                    'stuAns3': 'audioLink',\n                                    'stem': 'Link for SRL04p Adaptive Inference MWP4 audio',\n                                    'keys1': '5',\n                                    'keys2': '88',\n                                    'answerId': 'audio',\n                                    'queId': 'SRL04p',\n                                    'contextGrp1': 'AdaptiveInference',\n                                    'contextGrp2': 'MP',\n                                    'score1': '0',\n                                    'score2': '88',\n                                    'questionNum': 'SRL04p',\n                                    'chapterName': 'SRL04',\n                                    'queFormat': '7',\n                                    'nextAddress': 'https:\/\/myedme.com\/login\/SRL04_Feedback',\n                                    'action': 'edme_audio_function',\n                                    'type': 'POST',\n                                    'file': base64\n                                }\n                                console.log(\"Saving audio 2. audioData is\" + audioData);\n                                document.getElementById(\"NextPage\").style.backgroundColor = \"green\";\n                                document.getElementById(\"successText\").style.backgroundColor = \"green\";\n                                document.getElementById(\"successText\").style.color = \"white\";\n                                document.getElementById(\"NextPage\").style.color = \"white\";\n                                jQuery.post('https:\/\/myedme.com\/login\/wp-admin\/admin-ajax.php', audioData, function (response) {\n                                    \/\/\t\t        alert('Got this from the server: ' + response);\n                                    console.log(\"Saving audio 4.\")\n                                    console.log('Got this from the server: ' + response);\n                                });\n                                console.log(\"Saving audio 3.\")\n                                console.log(\"base64 is \" + base64);\n                            }\n                            \/\/audio2.duration\n                            \/\/audio2.currentTime = \n                            audio.src = audioURL;\n                            console.log(\"base64 is \" + base64);\n                            \/\/let encodedAudioString = blob.base64EncodedString()\n                            console.log(\"Saving audio.\")\n                            console.log(blob.size);\n                            console.log(blob.type);\n\n\n                        }\n\n\n                    })\n                    \/\/ Error callback\n                    .catch(function (err) {\n                        console.log('The following getUserMedia error occurred: ' + err);\n                    })\n\n            } else {\n                console.log('getUserMedia not supported on your browser!');\n            }\n        }\n\n        function visualizeAudio(stream) {\n            if (!audioCtx) {\n                audioCtx = new AudioContext();\n            }\n\n            const source = audioCtx.createMediaStreamSource(stream);\n\n            const analyser = audioCtx.createAnalyser();\n            analyser.fftSize = 2048;\n            const bufferLength = analyser.frequencyBinCount;\n            const dataArray = new Uint8Array(bufferLength);\n\n            source.connect(analyser);\n            \/\/analyser.connect(audioCtx.destination);\n\n            draw()\n\n            function draw() {\n                const WIDTH = canvas.width\n                const HEIGHT = canvas.height;\n\n                requestAnimationFrame(draw);\n\n                analyser.getByteTimeDomainData(dataArray);\n\n                canvasCtx.fillStyle = 'rgb(200, 200, 200)';\n                canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);\n\n                canvasCtx.lineWidth = 2;\n                canvasCtx.strokeStyle = 'rgb(0, 0, 0)';\n\n                canvasCtx.beginPath();\n\n                let sliceWidth = WIDTH * 1.0 \/ bufferLength;\n                let x = 0;\n\n\n                for (let i = 0; i < bufferLength; i++) {\n\n                    let v = dataArray[i] \/ 128.0;\n                    let y = v * HEIGHT \/ 2;\n\n                    if (i === 0) {\n                        canvasCtx.moveTo(x, y);\n                    } else {\n                        canvasCtx.lineTo(x, y);\n                    }\n\n                    x += sliceWidth;\n                }\n\n                canvasCtx.lineTo(canvas.width, canvas.height \/ 2);\n                canvasCtx.stroke();\n            }\n\n        }\n\n        \/\/ Set up our event listener to run the startup process\n        \/\/ once loading is complete.\n        console.log(\"trace 4\");\n        window.addEventListener('load', startup, false);\n        console.log(\"trace 5\");\n    })();\n<\/script>\n\n\n<div>\n<\/div>\n<p><!--<a href=\"http:\/\/www.myedme.com\/login\/SRL04_Feedback\"><button class=\"btn\"> Go to Next Question <\/button><\/a>  --><\/p>","protected":false},"excerpt":{"rendered":"<p>If you were given another chance to do a similar math problem, what would you need to do to do well?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"opened","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[43,44],"tags":[],"class_list":["post-834","post","type-post","status-publish","format-standard","hentry","category-allpages","category-menu082617"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts\/834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/comments?post=834"}],"version-history":[{"count":1,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts\/834\/revisions"}],"predecessor-version":[{"id":36144,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts\/834\/revisions\/36144"}],"wp:attachment":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/media?parent=834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/categories?post=834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/tags?post=834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}