The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Student Grade, Student Grade
jack_Co_K_ie
post Feb 28 2012, 07:05 AM
Post #1





Group: Members
Posts: 1
Joined: 28-February 12
Member No.: 16,591
I am really new to all this Java Script programming,

what i would like to try and get working is, when a user enters 4 grades into the text boxes. it would give them the Avg Grade and also what Mark they got,

and if they failed one out put the module they most Repeat and if they passed all out put a smiley face..

This is what i have so far..



CODE



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type='text/javascript'>

function formValidator(){
    // Make quick references to our fields
    var firstname = document.getElementById('firstname');
    var lastname = document.getElementById('lastname');
    var addr = document.getElementById('addr');
    var snumber = document.getElementById('snumber');
    var state = document.getElementById('state');
    var semester = document.getElementById('semester');
    var c  = document.getElementById('c');
    var computer = document.getElementById('computersystem');
    var web = document.getElementById('web');
    var math = document.getElementById('maths');

    
    
    // Check each input in the order that it appears in the form!
    if(isAlphabet(firstname, "Please enter Your First Name")){
        if(isAlphabet(lastname, "Please enter Your Last Name")){
        if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
            if(isNumeric(snumber, "Please enter a valid Student Number")){
                if(madeSelection(state, "Please Choose a City")){
                    if(isNumeric(semester, "Please enter a valid Semester Number")){
                        if(isNumeric(c, "Please enter a valid Grade number for C++")){
                            if(isNumeric(computer, "Please enter a valid Grade number for computer Sysyems ")){
                            if(isNumeric(web, "Please enter a valid Grade number Web Development")){
                                if(isNumeric(math, "Please enter a valid Grade number Maths")){
                            return true;
                        }
                    }
                }
            }
        }
    }
            }
        }
        
    }
    }
    
    
    return false;
    
}

function notEmpty(elem, helperMsg){
    if(elem.value.length == 0){
        alert(helperMsg);
        elem.focus(); // set the focus to this input
        return false;
    }
    return true;
}

function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function isAlphabet(elem, helperMsg){
    var alphaExp = /^[a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function isAlphanumeric(elem, helperMsg){
    var alphaExp = /^[0-9a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function lengthRestriction(elem, min, max){
    var uInput = elem.value;
    if(uInput.length >= min && uInput.length <= max){
        return true;
    }else{
        alert("Please enter between " +min+ " and " +max+ " characters");
        elem.focus();
        return false;
    }
}

function madeSelection(elem, helperMsg){
    if(elem.value == "Please Choose"){
        alert(helperMsg);
        elem.focus();
        return false;
    }else{
        return true;
    }
}

function emailValidator(elem, helperMsg){
    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    if(elem.value.match(emailExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}


// The event handler function to compute the cost



function computeCost() {

var c = document.getElementById("c").value;

  var computer = document.getElementById("computer").value;

  var web = document.getElementById("web").value;

var math = document.getElementById("math").value;



// Compute the cost



  document.getElementById("cost").value =

totalCost = (c * 100 + computer * 100 + web * 100 + math * 100 ) /4;

}  //* end of computeCost





</script>
</head>
<body>

<form  method="get" action="" onsubmit='return formValidator()' >
<fieldset id="personalInfo">
      <legend><strong>Student Record</strong></legend>
           <p>
First Name:      <br  />      
  <input type='text' id='firstname'  placeholder="first name" />
  </p>
  <p>
              Last Name: <br />
              <input type='text' id='lastname'  placeholder="last name"/>
              </p>
              <p>
              Address: <br  />
              <input type='text' id='addr'  placeholder="Address" />
              </p>
              <p>
              Student Number: <br  />
              <i>R</i> <input type='text' id='snumber'  placeholder="Student Number"/>
              </p>
              <p>
              State: <br  />
    <select id='state'>
                <option>Please Choose</option>
                <option value="AR">Armagh</option>
                <option value="CA">Carlow</option>
                <option value="CAV">Cavan</option>
                <option value="CLA">Clare</option>
                <option value="ORK">Cork</option>
                <option value="DO">Donegal</option>
                <option value="DOW">Down</option>
                <option value="DUB">Dublin</option>
                <option value="FER">Fermanagh</option>
                <option value="GAL">Galway</option>
                <option value="KE">Kerry</option>
                <option value="KIL">Kildare</option>
                <option value="KK">Kilkenny</option>
                <option value="LA">Laois</option>
                <option value="LEI">Leitrim</option>
                <option value="LIM">Limerick</option>
                <option value="LON">Londonderry</option>
                <option value="LONG">Longford</option>
                <option value="LOU">Louth</option>
                <option value="MAY">Mayo</option>
                <option value="ME">Meath</option>
                <option value="MON">Monaghan</option>
                <option value="OFF">Offaly</option>
                <option value="ROS">Roscommon</option>
                <option value="SLI">Sligo</option>
                <option value="TIP">Tipperary</option>
                <option value="TYR">Tyrone</option>
                <option value="WAT">Waterford</option>
                <option value="WES">Westmeath</option>
                <option value="WEX">Wexford</option>
                <option value="WIC">Wicklow</option>
                </p>
              </select>
              <p>
                    <h3> Student Results </h3>



<!-- A bordered table for item orders -->



      <table border = "border">



<!-- First, the column headings -->



        <tr>

          <th> Module Name </th>

          <th> Pass Mark </th>

          <th> Final Mark </th>

        </tr>



<!-- Now, the table data entries -->



        <tr>

          <th> C++ </th>

          <td> 40 % </td>

          <td> <input type = "text"  id = "c"  

                      size ="10" /> </td>

        </tr>

        <tr>

          <th> Computer Systems </th>

          <td> 40 % </td>

          <td> <input type = "text"  id = "computer"  

                size = "10" /> </td>

        </tr>

        <tr>

          <th> Web Development </th>

          <td> 40 %  </td>

          <td> <input type = "text"  id = "web"  

                size = "10" /></td>

        </tr>
         <tr>

          <th> Maths </th>

          <td> 40 %  </td>

          <td> <input type = "text"  id = "math"  

                      size ="10" /> </td>

        </tr>

      </table>



<!-- Button for precomputation of the total cost -->



      <p>

        <input type = "button"  value = "Total Grade"

               onclick = "computeCost();" />

        <input type = "text"  size = "5"  id = "cost"

               onfocus = "this.blur();" />

      </p>
              
              
              
    




          
</fieldset>
              </p>
  <input type='submit' value='Check Form' />

</form>
</body>
</html>


This post has been edited by jack_Co_K_ie: Feb 28 2012, 07:06 AM


Attached File(s)
Attached File  record.html ( 7.41k ) Number of downloads: 165
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
XP1
post Mar 17 2012, 10:17 AM
Post #2





Group: Members
Posts: 7
Joined: 14-March 12
Member No.: 16,709
First, store the modules into a collection, like an array. For each module, call a function that determines the grade.

If pass, get the module element and append an image element for a smiley face.
If fail, create a new section where all the failed module elements are located. At the end of the modules, check if you have any failed modules. If numberOfFailures > 0, append the failed module section into the body of the document.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 06:01 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC