pemby/index.html

## index.html
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Compute</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>
<script type="text/x-mathjax-config;executed=true">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']] } });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML" id="">
</script>
<script type="text/javascript">
    function num(id) {
        var r_val = 0;
        var e = document.getElementById(id);
        if (e != null) {
            var v = e.value;
            if (isNumeric(v)) {
                r_val = parseInt(v, 10);
            }
        }
        return r_val;
    }

    function isNumeric(num){
        return !isNaN(num)
    }

    function testNaN(element) {
        var rVal = 0;
        if (isNumeric(num(element)))
            rVal = num(element);

        return rVal;

    }

    function run() {

        var v1 = 0;
        var v2 = 0;
        var v3 = 0;
        var v4 = 0;

        var v1 = testNaN("v1");
        var v2 = testNaN("v2");
        var v3 = testNaN("v3");
        var v4 = testNaN("v4");


        var pv1Val = 4;
        var pv2Val = 3;
        var pv3Val = 2;
        var pvVal4 = 1;


        var ppEarned = math.matrix([[v1], [v2], [v3], [v4]]);
        var ppEarnedT = math.transpose(ppEarned);
        var projectionMatrix = math.multiply(ppEarned, ppEarnedT);

        var pvGradeValues = math.matrix([[pv1Val], [pv2Val], [pv3Val], [pvVal4]]);
        var rawScoreMatrix = math.multiply(projectionMatrix, pvGradeValues);

        var rawScoreSum = math.sum(rawScoreMatrix);

        var val1 = rawScoreMatrix.get([0, 0]);
        var pvVal1 = pvGradeValues.get([0, 0]);
        var r1 = (val1 / rawScoreSum) * pvVal1;
        if(isNaN(r1))
            r1 = 0;


        var val2 = rawScoreMatrix.get([1, 0]);
        var pvVal2 = pvGradeValues.get([1, 0]);
        var r2 = (val2 / rawScoreSum) * pvVal2;
        if(isNaN(r2))
            r2 = 0;

        var val3 = rawScoreMatrix.get([2, 0]);
        var pvVal3 = pvGradeValues.get([2, 0]);
        var r3 = (val3 / rawScoreSum) * pvVal3;
        if(isNaN(r3))
            r3 = 0;

        var val4 = rawScoreMatrix.get([3, 0]);
        var pvVal4 = pvGradeValues.get([3, 0]);
        var r4 = (val4 / rawScoreSum) * pvVal4;
        if(isNaN(r4))
            r4 = 0;

        var SumOfGradeValueByScaledScore = math.sum(r1, r2, r3, r4).toFixed(2);

        var r  = document.getElementById("result");
        if (r != null) {
            r.value = SumOfGradeValueByScaledScore;
        }

    }


    function addHandler(element, eventName, handler) {
        if (element.addEventListener) {
            element.addEventListener(eventName, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + eventName, handler);
        }
    }
    addHandler(window, "load",
        function() {
            var v1 = document.getElementById("v1");
            var v2 = document.getElementById("v2");
            var v3 = document.getElementById("v3");
            var v4 = document.getElementById("v4");

            var mj = document.getElementById("mj");


            addHandler(v1, "keyup", run);
            addHandler(v2, "keyup", run);
            addHandler(v3, "keyup", run);
            addHandler(v4, "keyup", run);
            addHandler(mj, "keyup", run);


        });
</script>


<style id="jsbin-css">
fieldset {
  padding: 1em;
  font:80%/1 sans-serif;
  }
label {
  float:left;
  width:25%;
  margin-right:0.5em;
  padding-top:0.2em;
  text-align:right;
  font-weight:bold;
  }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/mathjs@6.6.0/dist/math.min.js" integrity="sha256-v4EzcFR/sOSVpwhfWikw9bwkBQcQnbwtaLhHRSIEvHw=" crossorigin="anonymous"></script>
<form action="">
    <fieldset>
        <legend>QTY of Assignments</legend>
        <label for="v1">Highly Proficient</label>
        <input type="text" id="v1">
        <br>
        <label for="v2">Proficient</label>
        <input type="text" id="v2">
        <br>
        <label for="v3">Close to Proficient</label>
        <input type="text" id="v3">
        <br>
        <label for="v4">Developing</label>
        <input type="text" id="v4">
    </fieldset>
    <fieldset>
        <legend>GPA</legend>
        <input type="text" id="result" readonly>


    </fieldset>
    <br>
<!--    <fieldset>-->
<!--        <legend>The Math</legend>-->
<!--        <p  id="mj"> $$ { A }^{ T }A{ \overline { \beta  }  }={ A }^{ T }\overline { { Y } }\Rightarrow \begin{bmatrix} a^{ 2 } & ab & ac & ad \\ ab & b^{ 2 } & bc & bd \\ ac & bc & c^{ 2 } & cd \\ ad & bd & cd & d^{ 2 } \end{bmatrix}\begin{bmatrix} { \beta  }_{ 1 } \\ { \beta  }_{ 2 } \\ { \beta  }_{ 3 } \\ { \beta  }_{ 4 } \end{bmatrix} $$ </p>-->

<!--    </fieldset>-->

<!--    <br>-->
<!--    <p>-->
<!--    <script type="math/tex" id="MathJax-Element-3"> { A }^{ T }A{ \overline { \beta  }  }={ A }^{ T }\overline { { Y } }  </script>-->
<!--    </p>-->

</form>

<script id="jsbin-source-html" type="text/html"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Compute</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"><\/script>
<script type="text/javascript" id="MathJax-script" async
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
<\/script>
<script type="text/x-mathjax-config;executed=true">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']] } });
<\/script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML" id="">
<\/script>
<script type="text/javascript">
    function num(id) {
        var r_val = 0;
        var e = document.getElementById(id);
        if (e != null) {
            var v = e.value;
            if (isNumeric(v)) {
                r_val = parseInt(v, 10);
            }
        }
        return r_val;
    }

    function isNumeric(num){
        return !isNaN(num)
    }

    function testNaN(element) {
        var rVal = 0;
        if (isNumeric(num(element)))
            rVal = num(element);

        return rVal;

    }

    function run() {

        var v1 = 0;
        var v2 = 0;
        var v3 = 0;
        var v4 = 0;

        var v1 = testNaN("v1");
        var v2 = testNaN("v2");
        var v3 = testNaN("v3");
        var v4 = testNaN("v4");


        var pv1Val = 4;
        var pv2Val = 3;
        var pv3Val = 2;
        var pvVal4 = 1;


        var ppEarned = math.matrix([[v1], [v2], [v3], [v4]]);
        var ppEarnedT = math.transpose(ppEarned);
        var projectionMatrix = math.multiply(ppEarned, ppEarnedT);

        var pvGradeValues = math.matrix([[pv1Val], [pv2Val], [pv3Val], [pvVal4]]);
        var rawScoreMatrix = math.multiply(projectionMatrix, pvGradeValues);

        var rawScoreSum = math.sum(rawScoreMatrix);

        var val1 = rawScoreMatrix.get([0, 0]);
        var pvVal1 = pvGradeValues.get([0, 0]);
        var r1 = (val1 / rawScoreSum) * pvVal1;
        if(isNaN(r1))
            r1 = 0;


        var val2 = rawScoreMatrix.get([1, 0]);
        var pvVal2 = pvGradeValues.get([1, 0]);
        var r2 = (val2 / rawScoreSum) * pvVal2;
        if(isNaN(r2))
            r2 = 0;

        var val3 = rawScoreMatrix.get([2, 0]);
        var pvVal3 = pvGradeValues.get([2, 0]);
        var r3 = (val3 / rawScoreSum) * pvVal3;
        if(isNaN(r3))
            r3 = 0;

        var val4 = rawScoreMatrix.get([3, 0]);
        var pvVal4 = pvGradeValues.get([3, 0]);
        var r4 = (val4 / rawScoreSum) * pvVal4;
        if(isNaN(r4))
            r4 = 0;

        var SumOfGradeValueByScaledScore = math.sum(r1, r2, r3, r4).toFixed(2);

        var r  = document.getElementById("result");
        if (r != null) {
            r.value = SumOfGradeValueByScaledScore;
        }

    }


    function addHandler(element, eventName, handler) {
        if (element.addEventListener) {
            element.addEventListener(eventName, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + eventName, handler);
        }
    }
    addHandler(window, "load",
        function() {
            var v1 = document.getElementById("v1");
            var v2 = document.getElementById("v2");
            var v3 = document.getElementById("v3");
            var v4 = document.getElementById("v4");

            var mj = document.getElementById("mj");


            addHandler(v1, "keyup", run);
            addHandler(v2, "keyup", run);
            addHandler(v3, "keyup", run);
            addHandler(v4, "keyup", run);
            addHandler(mj, "keyup", run);


        });
<\/script>


</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/mathjs@6.6.0/dist/math.min.js" integrity="sha256-v4EzcFR/sOSVpwhfWikw9bwkBQcQnbwtaLhHRSIEvHw=" crossorigin="anonymous"><\/script>
<form action="">
    <fieldset>
        <legend>QTY of Assignments</legend>
        <label for="v1">Highly Proficient</label>
        <input type="text" id="v1">
        <br>
        <label for="v2">Proficient</label>
        <input type="text" id="v2">
        <br>
        <label for="v3">Close to Proficient</label>
        <input type="text" id="v3">
        <br>
        <label for="v4">Developing</label>
        <input type="text" id="v4">
    </fieldset>
    <fieldset>
        <legend>GPA</legend>
        <input type="text" id="result" readonly>


    </fieldset>
    <br>
<\!--    <fieldset>-->
<\!--        <legend>The Math</legend>-->
<\!--        <p  id="mj"> $$ { A }^{ T }A{ \overline { \beta  }  }={ A }^{ T }\overline { { Y } }\Rightarrow \begin{bmatrix} a^{ 2 } & ab & ac & ad \\ ab & b^{ 2 } & bc & bd \\ ac & bc & c^{ 2 } & cd \\ ad & bd & cd & d^{ 2 } \end{bmatrix}\begin{bmatrix} { \beta  }_{ 1 } \\ { \beta  }_{ 2 } \\ { \beta  }_{ 3 } \\ { \beta  }_{ 4 } \end{bmatrix} $$ </p>-->

<\!--    </fieldset>-->

<\!--    <br>-->
<\!--    <p>-->
<\!--    <script type="math/tex" id="MathJax-Element-3"> { A }^{ T }A{ \overline { \beta  }  }={ A }^{ T }\overline { { Y } }  <\/script>-->
<\!--    </p>-->

</form>
</body>
<footer>

</footer>
</html>
</script>

<script id="jsbin-source-css" type="text/css">fieldset {
  padding: 1em;
  font:80%/1 sans-serif;
  }
label {
  float:left;
  width:25%;
  margin-right:0.5em;
  padding-top:0.2em;
  text-align:right;
  font-weight:bold;
  }</script>
</body>
<footer>

</footer>
</html>

## jsbin.siyajek.css
fieldset {
  padding: 1em;
  font:80%/1 sans-serif;
  }
label {
  float:left;
  width:25%;
  margin-right:0.5em;
  padding-top:0.2em;
  text-align:right;
  font-weight:bold;
  }
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Compute</title>
	<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
	<script type="text/javascript" id="MathJax-script" async
	src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
	</script>
	<script type="text/x-mathjax-config;executed=true">
	MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']] } });
	</script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML" id="">
	</script>
	<script type="text/javascript">
	function num(id) {
	var r_val = 0;
	var e = document.getElementById(id);
	if (e != null) {
	var v = e.value;
	if (isNumeric(v)) {
	r_val = parseInt(v, 10);
	}
	}
	return r_val;
	}

	function isNumeric(num){
	return !isNaN(num)
	}

	function testNaN(element) {
	var rVal = 0;
	if (isNumeric(num(element)))
	rVal = num(element);

	return rVal;

	}

	function run() {

	var v1 = 0;
	var v2 = 0;
	var v3 = 0;
	var v4 = 0;

	var v1 = testNaN("v1");
	var v2 = testNaN("v2");
	var v3 = testNaN("v3");
	var v4 = testNaN("v4");



	var pv1Val = 4;
	var pv2Val = 3;
	var pv3Val = 2;
	var pvVal4 = 1;


	var ppEarned = math.matrix([[v1], [v2], [v3], [v4]]);
	var ppEarnedT = math.transpose(ppEarned);
	var projectionMatrix = math.multiply(ppEarned, ppEarnedT);

	var pvGradeValues = math.matrix([[pv1Val], [pv2Val], [pv3Val], [pvVal4]]);
	var rawScoreMatrix = math.multiply(projectionMatrix, pvGradeValues);

	var rawScoreSum = math.sum(rawScoreMatrix);

	var val1 = rawScoreMatrix.get([0, 0]);
	var pvVal1 = pvGradeValues.get([0, 0]);
	var r1 = (val1 / rawScoreSum) * pvVal1;
	if(isNaN(r1))
	r1 = 0;



	var val2 = rawScoreMatrix.get([1, 0]);
	var pvVal2 = pvGradeValues.get([1, 0]);
	var r2 = (val2 / rawScoreSum) * pvVal2;
	if(isNaN(r2))
	r2 = 0;

	var val3 = rawScoreMatrix.get([2, 0]);
	var pvVal3 = pvGradeValues.get([2, 0]);
	var r3 = (val3 / rawScoreSum) * pvVal3;
	if(isNaN(r3))
	r3 = 0;

	var val4 = rawScoreMatrix.get([3, 0]);
	var pvVal4 = pvGradeValues.get([3, 0]);
	var r4 = (val4 / rawScoreSum) * pvVal4;
	if(isNaN(r4))
	r4 = 0;

	var SumOfGradeValueByScaledScore = math.sum(r1, r2, r3, r4).toFixed(2);

	var r = document.getElementById("result");
	if (r != null) {
	r.value = SumOfGradeValueByScaledScore;
	}

	}


	function addHandler(element, eventName, handler) {
	if (element.addEventListener) {
	element.addEventListener(eventName, handler, false);
	} else if (element.attachEvent) {
	element.attachEvent("on" + eventName, handler);
	}
	}
	addHandler(window, "load",
	function() {
	var v1 = document.getElementById("v1");
	var v2 = document.getElementById("v2");
	var v3 = document.getElementById("v3");
	var v4 = document.getElementById("v4");

	var mj = document.getElementById("mj");


	addHandler(v1, "keyup", run);
	addHandler(v2, "keyup", run);
	addHandler(v3, "keyup", run);
	addHandler(v4, "keyup", run);
	addHandler(mj, "keyup", run);


	});
	</script>


	<style id="jsbin-css">
	fieldset {
	padding: 1em;
	font:80%/1 sans-serif;
	}
	label {
	float:left;
	width:25%;
	margin-right:0.5em;
	padding-top:0.2em;
	text-align:right;
	font-weight:bold;
	}
	</style>
	</head>
	<body>
	<script src="https://cdn.jsdelivr.net/npm/mathjs@6.6.0/dist/math.min.js" integrity="sha256-v4EzcFR/sOSVpwhfWikw9bwkBQcQnbwtaLhHRSIEvHw=" crossorigin="anonymous"></script>
	<form action="">
	<fieldset>
	<legend>QTY of Assignments</legend>
	<label for="v1">Highly Proficient</label>
	<input type="text" id="v1">
	<br>
	<label for="v2">Proficient</label>
	<input type="text" id="v2">
	<br>
	<label for="v3">Close to Proficient</label>
	<input type="text" id="v3">
	<br>
	<label for="v4">Developing</label>
	<input type="text" id="v4">
	</fieldset>
	<fieldset>
	<legend>GPA</legend>
	<input type="text" id="result" readonly>


	</fieldset>
	<br>
	<!-- <fieldset>-->
	<!-- <legend>The Math</legend>-->
	<!-- <p id="mj"> $$ { A }^{ T }A{ \overline { \beta } }={ A }^{ T }\overline { { Y } }\Rightarrow \begin{bmatrix} a^{ 2 } & ab & ac & ad \\ ab & b^{ 2 } & bc & bd \\ ac & bc & c^{ 2 } & cd \\ ad & bd & cd & d^{ 2 } \end{bmatrix}\begin{bmatrix} { \beta }_{ 1 } \\ { \beta }_{ 2 } \\ { \beta }_{ 3 } \\ { \beta }_{ 4 } \end{bmatrix} $$ </p>-->

	<!-- </fieldset>-->

	<!-- <br>-->
	<!-- <p>-->
	<!-- <script type="math/tex" id="MathJax-Element-3"> { A }^{ T }A{ \overline { \beta } }={ A }^{ T }\overline { { Y } } </script>-->
	<!-- </p>-->

	</form>

	<script id="jsbin-source-html" type="text/html"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Compute</title>
	<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"><\/script>
	<script type="text/javascript" id="MathJax-script" async
	src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
	<\/script>
	<script type="text/x-mathjax-config;executed=true">
	MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']] } });
	<\/script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML" id="">
	<\/script>
	<script type="text/javascript">
	function num(id) {
	var r_val = 0;
	var e = document.getElementById(id);
	if (e != null) {
	var v = e.value;
	if (isNumeric(v)) {
	r_val = parseInt(v, 10);
	}
	}
	return r_val;
	}

	function isNumeric(num){
	return !isNaN(num)
	}

	function testNaN(element) {
	var rVal = 0;
	if (isNumeric(num(element)))
	rVal = num(element);

	return rVal;

	}

	function run() {

	var v1 = 0;
	var v2 = 0;
	var v3 = 0;
	var v4 = 0;

	var v1 = testNaN("v1");
	var v2 = testNaN("v2");
	var v3 = testNaN("v3");
	var v4 = testNaN("v4");



	var pv1Val = 4;
	var pv2Val = 3;
	var pv3Val = 2;
	var pvVal4 = 1;


	var ppEarned = math.matrix([[v1], [v2], [v3], [v4]]);
	var ppEarnedT = math.transpose(ppEarned);
	var projectionMatrix = math.multiply(ppEarned, ppEarnedT);

	var pvGradeValues = math.matrix([[pv1Val], [pv2Val], [pv3Val], [pvVal4]]);
	var rawScoreMatrix = math.multiply(projectionMatrix, pvGradeValues);

	var rawScoreSum = math.sum(rawScoreMatrix);

	var val1 = rawScoreMatrix.get([0, 0]);
	var pvVal1 = pvGradeValues.get([0, 0]);
	var r1 = (val1 / rawScoreSum) * pvVal1;
	if(isNaN(r1))
	r1 = 0;



	var val2 = rawScoreMatrix.get([1, 0]);
	var pvVal2 = pvGradeValues.get([1, 0]);
	var r2 = (val2 / rawScoreSum) * pvVal2;
	if(isNaN(r2))
	r2 = 0;

	var val3 = rawScoreMatrix.get([2, 0]);
	var pvVal3 = pvGradeValues.get([2, 0]);
	var r3 = (val3 / rawScoreSum) * pvVal3;
	if(isNaN(r3))
	r3 = 0;

	var val4 = rawScoreMatrix.get([3, 0]);
	var pvVal4 = pvGradeValues.get([3, 0]);
	var r4 = (val4 / rawScoreSum) * pvVal4;
	if(isNaN(r4))
	r4 = 0;

	var SumOfGradeValueByScaledScore = math.sum(r1, r2, r3, r4).toFixed(2);

	var r = document.getElementById("result");
	if (r != null) {
	r.value = SumOfGradeValueByScaledScore;
	}

	}


	function addHandler(element, eventName, handler) {
	if (element.addEventListener) {
	element.addEventListener(eventName, handler, false);
	} else if (element.attachEvent) {
	element.attachEvent("on" + eventName, handler);
	}
	}
	addHandler(window, "load",
	function() {
	var v1 = document.getElementById("v1");
	var v2 = document.getElementById("v2");
	var v3 = document.getElementById("v3");
	var v4 = document.getElementById("v4");

	var mj = document.getElementById("mj");


	addHandler(v1, "keyup", run);
	addHandler(v2, "keyup", run);
	addHandler(v3, "keyup", run);
	addHandler(v4, "keyup", run);
	addHandler(mj, "keyup", run);


	});
	<\/script>


	</head>
	<body>
	<script src="https://cdn.jsdelivr.net/npm/mathjs@6.6.0/dist/math.min.js" integrity="sha256-v4EzcFR/sOSVpwhfWikw9bwkBQcQnbwtaLhHRSIEvHw=" crossorigin="anonymous"><\/script>
	<form action="">
	<fieldset>
	<legend>QTY of Assignments</legend>
	<label for="v1">Highly Proficient</label>
	<input type="text" id="v1">
	<br>
	<label for="v2">Proficient</label>
	<input type="text" id="v2">
	<br>
	<label for="v3">Close to Proficient</label>
	<input type="text" id="v3">
	<br>
	<label for="v4">Developing</label>
	<input type="text" id="v4">
	</fieldset>
	<fieldset>
	<legend>GPA</legend>
	<input type="text" id="result" readonly>


	</fieldset>
	<br>
	<\!-- <fieldset>-->
	<\!-- <legend>The Math</legend>-->
	<\!-- <p id="mj"> $$ { A }^{ T }A{ \overline { \beta } }={ A }^{ T }\overline { { Y } }\Rightarrow \begin{bmatrix} a^{ 2 } & ab & ac & ad \\ ab & b^{ 2 } & bc & bd \\ ac & bc & c^{ 2 } & cd \\ ad & bd & cd & d^{ 2 } \end{bmatrix}\begin{bmatrix} { \beta }_{ 1 } \\ { \beta }_{ 2 } \\ { \beta }_{ 3 } \\ { \beta }_{ 4 } \end{bmatrix} $$ </p>-->

	<\!-- </fieldset>-->

	<\!-- <br>-->
	<\!-- <p>-->
	<\!-- <script type="math/tex" id="MathJax-Element-3"> { A }^{ T }A{ \overline { \beta } }={ A }^{ T }\overline { { Y } } <\/script>-->
	<\!-- </p>-->

	</form>
	</body>
	<footer>

	</footer>
	</html>
	</script>

	<script id="jsbin-source-css" type="text/css">fieldset {
	padding: 1em;
	font:80%/1 sans-serif;
	}
	label {
	float:left;
	width:25%;
	margin-right:0.5em;
	padding-top:0.2em;
	text-align:right;
	font-weight:bold;
	}</script>
	</body>
	<footer>

	</footer>
	</html>