0

Hi all! So I have created this for my first portion of my Beginning CIS class project, calculating the final grade based on scores. For the next step, the user must be able to enter in their own number of projects they have completed, and from that, be able to put individual scores in that number of projects they entered. (For example, if they say they did 5 projects, they then individually write the number grade of each project). Then, the final letter grade is computed based on all the information.

I'm totally stuck and don't know where to begin to add that in. Could anyone help me out? Here is my code for the first portion, without the dynamic input text add-in:

<html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Grade Calculator</title>
            </head>
    <body>
        <h1>Grade Calculator</h1>
        <p>Enter only whole numbers.</p>
        <form name="Grade Calculator" id="form">
            <p>
                <label for="homework">Homework:</label>
                <input type="text" id="homework" value="" name="Homework" size="3"
                maxlength="3">
            </p>
            <p>
                <label for="projects">Projects:</label>
                <input type="text" id="projects" value="" name="Projects" size="3"
                maxlength="3">
            </p>
            <p>
                <label for="midterm">Midterm:</label>
                <input type="text" id="midterm" value="" name="Midterm"
                        size="3" maxlength="3">
            </p>
            <p>
                <label for="final">Final:</label>
                <input type="text" id="final" value="" name="Final"
                        size="3" maxlength="3">
            </p>
                      <p class="h-line"></p>
            <p>
                <label for="final-grade">Final Grade (Letter Grade):</label>
                <input type="text" name="Final Grade" id="final-grade" value="" 
                        size="7" readonly="readonly" tabindex="-1">
            </p>
            <p>
                <input type="button" value="Calculate" onclick="calcGrade();">
                <input type="reset" value="Reset">
            </p>
        </form>
    <script type="text/javascript">
        function calcGrade() {
            var form = document.getElementById("form");
            var finalGrade = document.getElementById("final-grade");
            var input;
            var i = 4;
            var grade = [];


            while (i--) {
                input = form.elements[i].value;
                if (parseInt(input, 10)) {
                    input = parseInt(input, 10);
                    form.elements[i].value = input;
                    if (input <= 100 && input >= 0) {
                        grade[i] = input;
                    } else {
                        if (input > 100) {
                            grade[i] = 100;
                            form.elements[i].value = "100";
                        } else {
                            if (input < 0) {
                                grade[i] = 0;
                                form.elements[i].value = "0";
                            }
                        }
                    }
                } else {
                    grade[i] = 0;
                    form.elements[i].value = "0";
                }    
            }


            grade[4] = Math.round((grade[0] * 0.2) + (grade[1] * 0.25) + 
                    (grade[2] * 0.2) + (grade[3] * 0.35));

            if (grade[4] < 60) {
                finalGrade.value = (grade[4] + " (F)");
                return;
            }
            if (grade[4] >= 60 && grade[4] < 70) {
                finalGrade.value = (grade[4] + " (D)");
                return;
            }
            if (grade[4] >= 70 && grade[4] < 80) {
                finalGrade.value = (grade[4] + " (C)");
                return;
            }
            if (grade[4] >= 80 && grade[4] < 90) {
                finalGrade.value = (grade[4] + " (B)");
                return;
            }
            if (grade[4] >= 90) {
                finalGrade.value = (grade[4] + " (A)");
            }  
        }
    </script>
    </body>
</html>


    <meta charset="utf-8">
    <title>Grade Calculator</title>
        </head>
<body>
    <h1>Grade Calculator</h1>
    <p>Enter only whole numbers.</p>
    <form name="Grade Calculator" id="form">
        <p>
            <label for="homework">Homework:</label>
            <input type="text" id="homework" value="" name="Homework" size="3"
            maxlength="3">
        </p>
        <p>
            <label for="projects">Projects:</label>
            <input type="text" id="projects" value="" name="Projects" size="3"
            maxlength="3">
        </p>
        <p>
            <label for="midterm">Midterm:</label>
            <input type="text" id="midterm" value="" name="Midterm"
                    size="3" maxlength="3">
        </p>
        <p>
            <label for="final">Final:</label>
            <input type="text" id="final" value="" name="Final"
                    size="3" maxlength="3">
        </p>
                  <p class="h-line"></p>
        <p>
            <label for="final-grade">Final Grade (Letter Grade):</label>
            <input type="text" name="Final Grade" id="final-grade" value="" 
                    size="7" readonly="readonly" tabindex="-1">
        </p>
        <p>
            <input type="button" value="Calculate" onclick="calcGrade();">
            <input type="reset" value="Reset">
        </p>
    </form>
<script type="text/javascript">
    function calcGrade() {
        var form = document.getElementById("form");
        var finalGrade = document.getElementById("final-grade");
        var input;
        var i = 4;
        var grade = [];


        while (i--) {
            input = form.elements[i].value;
            if (parseInt(input, 10)) {
                input = parseInt(input, 10);
                form.elements[i].value = input;
                if (input <= 100 && input >= 0) {
                    grade[i] = input;
                } else {
                    if (input > 100) {
                        grade[i] = 100;
                        form.elements[i].value = "100";
                    } else {
                        if (input < 0) {
                            grade[i] = 0;
                            form.elements[i].value = "0";
                        }
                    }
                }
            } else {
                grade[i] = 0;
                form.elements[i].value = "0";
            }    
        }


        grade[4] = Math.round((grade[0] * 0.2) + (grade[1] * 0.25) + 
                (grade[2] * 0.2) + (grade[3] * 0.35));

        if (grade[4] < 60) {
            finalGrade.value = (grade[4] + " (F)");
            return;
        }
        if (grade[4] >= 60 && grade[4] < 70) {
            finalGrade.value = (grade[4] + " (D)");
            return;
        }
        if (grade[4] >= 70 && grade[4] < 80) {
            finalGrade.value = (grade[4] + " (C)");
            return;
        }
        if (grade[4] >= 80 && grade[4] < 90) {
            finalGrade.value = (grade[4] + " (B)");
            return;
        }
        if (grade[4] >= 90) {
            finalGrade.value = (grade[4] + " (A)");
        }  
    }
</script>
</body>

</html>

2
Contributors
1
Reply
17
Views
4 Years
Discussion Span
Last Post by Troy III
0

That's nice
have you seen this:
http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/415888/if-statement-javascript#post1775237

    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Grade Calculator</title>
            <style type="text/css">
                body {
                    font-family: Arial, sans-serif;
                    text-align: center;
                }
                form {
                    width: 300px;
                    margin: 0 auto;
                    text-align: right;
                }
                .h-line {
                    background-color: black;
                    margin: 2px auto;
                    width: 100%;
                    height: 2px;
                }
                input {
                    text-align: right;
                }
            </style>
        </head>
        <body>
            <h1>Grade Calculator</h1>
            <p>Enter only whole numbers.</p>
            <form name="Grade Calculator" id="form">
                <p>
                    <label for="test1">Test #1 Grade:</label>
                    <input type="text" id="test1" value="" name="Test #1" size="3"
                    maxlength="3">
                </p>

                <p class="h-line"></p>
                <p>
                    <label for="final-grade">Final Grade (Letter Grade):</label>
                    <input type="text" name="Final Grade" id="final-grade" value=""
                            size="7" >
                </p>
                <p>
                    <input type="button" value="Calculate" onclick="calcGrade();">
                    <input type="reset" value="Reset">
                </p>
            </form>
        <script type="text/javascript">

            function calcGrade() {
                var form = document.getElementById("form");
                var finalGrade = document.getElementById("final-grade");
                var field = form.elements['test1'];     
        var input = field.value, grade, max = 100, min = 0;

        input = parseInt(input, 10)
            field.value = 
            grade = input > max ? grade = max : 
                input < min ? grade = min : 
                input;
            finalGrade.value =
                (grade < 60) ? "F" :
                (grade < 70) ? "D" :
                (grade < 80) ? "C" :
                (grade < 90) ? "B" :
                (grade <=100) ? "A" : "!";
        }
        </script>
        </body>
    </html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.