rheajt · December 10, 2019 10:15
diff --git a/app.html b/app.html
 <!DOCTYPE html>
 <html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
    button {
      display: block;
      margin: 1rem auto;
      width: 100px;
      height: 100px;
      background-color: #404d63;
      font-size: 2rem;
      border-radius: 50%;
      color: white;
      border: 0;
      outline: 0;
    }
    
    button.working {
      background-color: #ddb99d;
    }
    
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    li {
      text-align: center;
      border: 1px solid grey;
      padding: 4px;
    }
    
    li.success {
      background-color: #b9f9ac;
    }
    li.fail {
      background-color: #ddb99d;
      text-decoration: line-through;
    }
    </style>
  </head>
  <body>
    <div>
      <button><i class="fas fa-microphone"></i></button>
      <ul class="command-box"></ul>
    </div>
    
    <script>
    window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    const recognition = new SpeechRecognition();
    recognition.interimResults = true;
    
    //get elements
    const button = document.querySelector('button');
    const commandBox = document.querySelector('.command-box');
    let command = document.createElement('li');
    
    
    commandBox.appendChild(command);
    
    recognition.addEventListener('result', e => {
      const transcript = Array.from(e.results)
        .map(result => result[0])
        .map(result => result.transcript)
        .join('');
        
      command.textContent = transcript;
      
      if(e.results[0].isFinal) {
        button.className = 'working';
        button.disabled = true;
        
        google.script.run
          .withSuccessHandler(resp => {
            console.log(resp);
            if(resp) {
              command.className = 'success';
            } else {
              command.className = 'fail';
            }
            
            command = document.createElement('li');
            commandBox.appendChild(command);
            button.className = '';
          })
          .withFailureHandler(err => {
            //hopefully we won't need this handler
            //we will try to handle any errors ourselves
            //but it is nice to know it is here!
            console.log('error', err);
          })
          .executeCommand(transcript);
      }
    });
    
    button.addEventListener('click', e => {
      recognition.start();
    });
    </script>
  </body>
 </html>
diff --git a/Code.gs b/Code.gs
 function onOpen() {
  SpreadsheetApp.getUi()
  .createMenu('Marking Application')
  .addItem('Open App', 'openApp')
  .addToUi();
 }

 function openApp() {
  var html = HtmlService.createHtmlOutputFromFile('app');
  
  SpreadsheetApp.getUi().showSidebar(html);
 }

 function executeCommand(speech) {
  try {
    //declare the column variable basically sets it as a default
    var column = 2;
    
    //grab some variables that we will use later in the function
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = SpreadsheetApp.getActiveSheet();
    var rows = sheet.getDataRange().getValues();
    
    //use the logger service to check ourselves    
    Logger.log(speech);
    
    //new syntax! destructure the speech into separate variables
    var splitSpeech = speech.split(' ');
    var [command, name] = splitSpeech;
    
    //array methods are magical
    var mark = splitSpeech.slice(2).join(' ');
    Logger.log(mark);
    
    //run a string method to standardize our data
    command = command.toLowerCase();
    name = name.toLowerCase();
        
    //use some logic to check ourselves
    if(command !== 'mark' && command !== 'comment') {
    Logger.log(command);
      //return is keyword that literally returns some value
      return false;
    }
    
    //more logic to figure out the column we are trying to affect
    if(command === 'comment') {
      //notice the equal signs... have i talked about that yet?
      column = 3;
    }
    
    rows.forEach(function(row, idx) {   //Watch out! Pay attention to 0-index used in array and 1-index used in Ranges
      
      if(row[0].toLowerCase() === name.toLowerCase()) {
        Logger.log('current row: ' + idx);
        Logger.log('name ' + name);
        Logger.log('mark ' + mark);
        sheet.getRange(idx + 1, column).setValue(mark)
      }
    });
    
    return true;  
  } catch(err) {
    ss.toast(err);
    return false;
  }
 }
	<!DOCTYPE html>
	<html>
	<head>
	<base target="_top">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
	<style>
	button {
	display: block;
	margin: 1rem auto;
	width: 100px;
	height: 100px;
	background-color: #404d63;
	font-size: 2rem;
	border-radius: 50%;
	color: white;
	border: 0;
	outline: 0;
	}

	button.working {
	background-color: #ddb99d;
	}

	ul {
	list-style: none;
	padding: 0;
	margin: 0;
	}
	li {
	text-align: center;
	border: 1px solid grey;
	padding: 4px;
	}

	li.success {
	background-color: #b9f9ac;
	}
	li.fail {
	background-color: #ddb99d;
	text-decoration: line-through;
	}
	</style>
	</head>
	<body>
	<div>
	<button><i class="fas fa-microphone"></i></button>
	<ul class="command-box"></ul>
	</div>

	<script>
	window.SpeechRecognition = window.SpeechRecognition \|\| window.webkitSpeechRecognition;
	const recognition = new SpeechRecognition();
	recognition.interimResults = true;

	//get elements
	const button = document.querySelector('button');
	const commandBox = document.querySelector('.command-box');
	let command = document.createElement('li');


	commandBox.appendChild(command);

	recognition.addEventListener('result', e => {
	const transcript = Array.from(e.results)
	.map(result => result[0])
	.map(result => result.transcript)
	.join('');

	command.textContent = transcript;

	if(e.results[0].isFinal) {
	button.className = 'working';
	button.disabled = true;

	google.script.run
	.withSuccessHandler(resp => {
	console.log(resp);
	if(resp) {
	command.className = 'success';
	} else {
	command.className = 'fail';
	}

	command = document.createElement('li');
	commandBox.appendChild(command);
	button.className = '';
	})
	.withFailureHandler(err => {
	//hopefully we won't need this handler
	//we will try to handle any errors ourselves
	//but it is nice to know it is here!
	console.log('error', err);
	})
	.executeCommand(transcript);
	}
	});

	button.addEventListener('click', e => {
	recognition.start();
	});
	</script>
	</body>
	</html>
	function onOpen() {
	SpreadsheetApp.getUi()
	.createMenu('Marking Application')
	.addItem('Open App', 'openApp')
	.addToUi();
	}

	function openApp() {
	var html = HtmlService.createHtmlOutputFromFile('app');

	SpreadsheetApp.getUi().showSidebar(html);
	}

	function executeCommand(speech) {
	try {
	//declare the column variable basically sets it as a default
	var column = 2;

	//grab some variables that we will use later in the function
	var ss = SpreadsheetApp.getActiveSpreadsheet();
	var sheet = SpreadsheetApp.getActiveSheet();
	var rows = sheet.getDataRange().getValues();

	//use the logger service to check ourselves
	Logger.log(speech);

	//new syntax! destructure the speech into separate variables
	var splitSpeech = speech.split(' ');
	var [command, name] = splitSpeech;

	//array methods are magical
	var mark = splitSpeech.slice(2).join(' ');
	Logger.log(mark);

	//run a string method to standardize our data
	command = command.toLowerCase();
	name = name.toLowerCase();

	//use some logic to check ourselves
	if(command !== 'mark' && command !== 'comment') {
	Logger.log(command);
	//return is keyword that literally returns some value
	return false;
	}

	//more logic to figure out the column we are trying to affect
	if(command === 'comment') {
	//notice the equal signs... have i talked about that yet?
	column = 3;
	}

	rows.forEach(function(row, idx) { //Watch out! Pay attention to 0-index used in array and 1-index used in Ranges

	if(row[0].toLowerCase() === name.toLowerCase()) {
	Logger.log('current row: ' + idx);
	Logger.log('name ' + name);
	Logger.log('mark ' + mark);
	sheet.getRange(idx + 1, column).setValue(mark)
	}
	});

	return true;
	} catch(err) {
	ss.toast(err);
	return false;
	}
	}