Publish result Google Apps Script, Javascript and Google sheet- CodyLab

Google Web App | Publish Student Results in AppsScript, html form, google-sheet

An example of results publishing in apps script, javascript | School Project

In this article, we have show how can you publish student result class wise. So, I have used google sheet as a class sheet. See following example:

In above example. You are seeing a google spreadsheet having I to V sheets on it.

Every sheet has different data to show the result. We are shoing I to V class in a dropdown select option. Students select this as their class. After selecting their class students show other dropdown option. In this option, students can find their roll number.

After selecting their roll number, students will have to click on 'Submit' button. As soon as student clicks on 'Submit' button, result appear below as following Example.

LIVE DEMO

Let's start creating now. First move to apps script page and create a new project.

Make a copy of following code and paste it into Code.gs page.

Code.gs

function doGet(e) {
  return HtmlService
    .createHtmlOutputFromFile('index')
    .setTitle("Exam Result Example");
}

function alldata(){
  var gss = SpreadsheetApp.openById('PASTE YOUR SPREADSHEET ID HERE');
  var sheets = gss.getSheets();
  var sheetsData = {};
  var sheetName = '';
  var sheetdata;
  for (i = 0; i < sheets.length; i++) {
    sheetName = sheets[i].getName();    
    sheetdata = sheets[i].getDataRange().getValues();    
    sheetsData[sheetName] = sheetdata;    
  }
   
  return sheetsData;
}
  
In above code paste your spreadsheet Id .
To Find your spreadsheet id, see following image.
Now create second html page in your project.
To create new html page see following image.
Name this file 'index.html' and save it.

Copy and Paste following html code in page index.html
  
index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
body{font-family:times;}
select,button{
padding:2px;
width:200px;
size:12px;
border:1px solid black;
font-family:merriweather;}
input:hover{
background:yellow;}
</style>
    <script>    
      window.onload = function() {        
        init();
      };
      // loading image
      var loading = 'Loading...';
      function init() {
        document.getElementById('result').innerHTML = loading;
        google.script.run
              .withSuccessHandler(populateClass)
              .alldata();
      }
       
      function populateClass(value) {
        document.getElementById('result').innerHTML = ''; // hide loading
        allResultData = value;
        var className = Object.keys(value).sort();
        var classes = '<option>Please Select</option>';
        for (i = 0; i < className.length; i++) {
          classes += "<option>" + className[i] + "</option>";
        }
        document.getElementById("class").innerHTML = classes;
      }
      
      function populateRoll(value)
      {      
        var roll = "<option>Please Select</option>";        
        var data = allResultData[value]
        for (i=1; i < data.length; i++) { // start from i=1, skipping 1st row as it's heading
          roll += "<option value="+i+">" + data[i][0] + "</option>";
        }
        document.getElementById("roll").innerHTML = roll;
      }
      
      function submitForm() {        
        var grade = document.getElementById("class");
        var gradeValue = grade.options[grade.selectedIndex].value;
        var classResult = allResultData[gradeValue];
        var symbol = document.getElementById("roll");
        var symbolText = symbol.options[symbol.selectedIndex].text;
        var symbolValue = symbol.options[symbol.selectedIndex].value;
        
        var marks = '';
        var headerRow = classResult[0];
        //console.log(headerRow);
        for (i = 1; i < headerRow.length; i++) {
          marks += headerRow[i] + ': ' + classResult[symbolValue][i] + '<br>';
        }
        
        var result = "ID Number: " + symbolText + '<br>' + marks;
        document.getElementById('result').innerHTML = result;
        
        return false;              
      }
    </script>
  </head>
  <body>
   
      <table cellpadding="5px" align="center">
      <tr>
      <td>Class:</td>
      <td>
      <select id="class" onchange="populateRoll(this.value)">
      <option value="">Please Select</option></select>
      </td>
      </tr>
      <tr>
      <td>Roll:</td>
      <td>
      <select id="roll">
      <option value="">Please Select</option>
      </select>            
      </td>
      </tr>        
      <tr>
      <td> </td>
      <td>
      <button onclick="submitForm(); return false;">Submit</button>
      </td>
      </tr> 
      </table>
  
    <div id="result" style="border-top: 1px solid #ccc; padding: 5px"align="center"></div> 
  </body>
</html>
  
Save both  file and deploy it as a web app, Pass access for anyone.
LIVE DEMO
  
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.   I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
                                                                                                    THANKS FOR VISITING  CodyLab   
                                                                                 Have a nice day!
       --------------------------                          -------------------------