hg2355/Index.html

## code.js
function doGet() {
  return HtmlService.createTemplateFromFile('Index.html')
   .evaluate() // evaluate MUST come before setting the Sandbox mode
   .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
   .setTitle('Student Portal to Select Options');

}


function data() {

 //function below looks for the username of activeUser in the list "Students" defined in the google spreadsheet
 //The loop finds the row and returns the data for the student where username matches what's in the spreadsheet
 //This data function at the end returns four columns of info in an array
 //Index.html header section shows how each part of the array is then separated into a div

  try {
  var user_in = Session.getActiveUser().getEmail();

  var students = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Students');

  var  user = user_in.split("@")[0];

  var studentEmails = SpreadsheetApp.getActiveSpreadsheet()
      .getRangeByName("Students!userNames")
      .getValues();

  var outRow;
  var data;

  for (var i = 0; i < studentEmails.length; i++)
  {
    if (studentEmails[i] == user)
    {
      outRow = i+1;
      break;
    }
  }

  return students.getRange(outRow, 1, 1, 4).getValues();

  }

  }
   catch(e) {
    return [["No data for " + Session.getActiveUser().getEmail() ]];
  }

}

## Index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.1/examples/jumbotron/jumbotron.css">

    <script>
      function onSuccess(data) {
        var div = document.getElementById('name');
        div.innerHTML = data[0][0];

        var div2 = document.getElementById('block1');
        div2.innerHTML = data[0][1];

        var div3 = document.getElementById('block2');
        div3.innerHTML = data[0][2];

        var div4 = document.getElementById('block3');
        div4.innerHTML = data[0][3];

        var div5 = document.getElementById('block4');
        div5.innerHTML = data[0][4];
      }

      google.script.run.withSuccessHandler(onSuccess)
          .data();
    </script>

</head>

<body>
 <div class="text-center md-3">
      <?= Session.getActiveUser().getEmail(); ?><hr>
 </div>

    <main role="main" id="main">
      <div class="jumbotron">
        <div class="container">
          <h1 class="display-3"><div id="name"></div></h1>
          <div id="cultureData"></div>
          <p>Below you will find your C-Day schedule.
          Some blocks are set, and for others please make a choice.</p>
        </div>
      </div>


<div class="container">
        <div class="row">
          <div class="col-md-3">
            <h2>Block 1</h2>
            <p class="text-muted">9:30 - 10:20am</p>
            <p><div id="block1"></div></p>
          </div>
          <div class="col-md-3">
            <h2>Block 2</h2>
            <p class="text-muted">10:25 - 11:15am</p>
            <p><div id="block2"></div></p>
          </div>
          <div class="col-md-3">
            <h2>Block 3</h2>
            <p class="text-muted">11:20 - 12:10pm</p>
            <p><div id="block3"></div></p>
          </div>
          <div class="col-md-3">
            <h2>Block 4</h2>
            <p class="text-muted">12:25 - 1:15pm</p>
            <p><div id="block4"></div></p>
          </div>
        </div>

        <hr>

        <p class="text-center">Refresh this page after making all your choices.</p>

      </div>


    </main>

    <footer class="container">

    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
    <script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js"></script>
    <script src="https://getbootstrap.com/docs/4.1/dist/js/bootstrap.min.js"></script>
  </body>

</html>
	function doGet() {
	return HtmlService.createTemplateFromFile('Index.html')
	.evaluate() // evaluate MUST come before setting the Sandbox mode
	.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
	.setTitle('Student Portal to Select Options');

	}



	function data() {

	//function below looks for the username of activeUser in the list "Students" defined in the google spreadsheet
	//The loop finds the row and returns the data for the student where username matches what's in the spreadsheet
	//This data function at the end returns four columns of info in an array
	//Index.html header section shows how each part of the array is then separated into a div

	try {
	var user_in = Session.getActiveUser().getEmail();

	var students = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Students');

	var user = user_in.split("@")[0];

	var studentEmails = SpreadsheetApp.getActiveSpreadsheet()
	.getRangeByName("Students!userNames")
	.getValues();

	var outRow;
	var data;

	for (var i = 0; i < studentEmails.length; i++)
	{
	if (studentEmails[i] == user)
	{
	outRow = i+1;
	break;
	}
	}

	return students.getRange(outRow, 1, 1, 4).getValues();

	}

	}
	catch(e) {
	return [["No data for " + Session.getActiveUser().getEmail() ]];
	}

	}
	<!DOCTYPE html>
	<html>
	<head>
	<base target="_top">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://getbootstrap.com/docs/4.1/examples/jumbotron/jumbotron.css">

	<script>
	function onSuccess(data) {
	var div = document.getElementById('name');
	div.innerHTML = data[0][0];

	var div2 = document.getElementById('block1');
	div2.innerHTML = data[0][1];

	var div3 = document.getElementById('block2');
	div3.innerHTML = data[0][2];

	var div4 = document.getElementById('block3');
	div4.innerHTML = data[0][3];

	var div5 = document.getElementById('block4');
	div5.innerHTML = data[0][4];
	}

	google.script.run.withSuccessHandler(onSuccess)
	.data();
	</script>

	</head>

	<body>
	<div class="text-center md-3">
	<?= Session.getActiveUser().getEmail(); ?><hr>
	</div>

	<main role="main" id="main">
	<div class="jumbotron">
	<div class="container">
	<h1 class="display-3"><div id="name"></div></h1>
	<div id="cultureData"></div>
	<p>Below you will find your C-Day schedule.
	Some blocks are set, and for others please make a choice.</p>
	</div>
	</div>


	<div class="container">
	<div class="row">
	<div class="col-md-3">
	<h2>Block 1</h2>
	<p class="text-muted">9:30 - 10:20am</p>
	<p><div id="block1"></div></p>
	</div>
	<div class="col-md-3">
	<h2>Block 2</h2>
	<p class="text-muted">10:25 - 11:15am</p>
	<p><div id="block2"></div></p>
	</div>
	<div class="col-md-3">
	<h2>Block 3</h2>
	<p class="text-muted">11:20 - 12:10pm</p>
	<p><div id="block3"></div></p>
	</div>
	<div class="col-md-3">
	<h2>Block 4</h2>
	<p class="text-muted">12:25 - 1:15pm</p>
	<p><div id="block4"></div></p>
	</div>
	</div>

	<hr>

	<p class="text-center">Refresh this page after making all your choices.</p>

	</div>


	</main>

	<footer class="container">

	</footer>

	<!-- Bootstrap core JavaScript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script>window.jQuery \|\| document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
	<script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js"></script>
	<script src="https://getbootstrap.com/docs/4.1/dist/js/bootstrap.min.js"></script>
	</body>

	</html>