<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src='https://advancedfunctions.co/genericWebsiteCode/googleSheetsPortal.js'></script>
<script src='https://advancedfunctions.co/genericWebsiteCode/styleSheet.js'></script>
<script src='https://advancedfunctions.co/genericWebsiteCode/searchBarMultiple.js'></script>
<script src='https://advancedfunctions.co/genericWebsiteCode/gui.js'></script>
</head>
<body>
<input class='textboxAsLine' placeholder='Enter email address' id='email' autocomplete='off'><span style='cursor:pointer' title='Email password' onclick='javascript:emailPassword()'><i>✉️</i></span></input>
<br>
<input class='textboxAsLine' type='password' id='password' placeholder='Enter password' autocomplete='off'></input>
<br>
<input class='textboxAsLine' id='scoreDisplay' placeholder='Score' autocomplete='off' readonly></input>
<br>
<div style='text-align:center;font: 40px Calibri;padding:20px;' id='quizName'>Matching Quiz</div>
<div id='quizPane'></div>
<div style='text-align:center;font: 40px Calibri;padding:20px;cursor:pointer;border:solid 1px;margin:40px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;margin-bottom:80px' onclick='javascript:mark()'>Submit</div>
</body>
<script>
var sheet=window.location.href.substring(window.location.href.indexOf('?')+1,window.location.href.length);
if(window.location.href.indexOf('?')>-1){
setInnerHTML('quizName','Matching Quiz ('+sheet+')');}
var googleSheetsPortalScript='https://script.google.com/macros/s/AKfycbybmKK8zur1QdwnceC57SvqUtG1LTTey9MbP2tFBeT_tiom2K-_ABox6EMaE9scmIn4pw/exec';
var googleSheetsGradeBook='https://script.google.com/macros/s/AKfycbwyM8Er58bx3TMa4pxX9icc87irdQ3cPyeX9-oz1GGGyv42lhxNvl6MLajC4aYzhKDRHw/exec';
var questions;
var choices;
var answers;
sendDataToGoogleSheets(['getQuiz',sheet],googleSheetsPortalScript);
function receiveDataFromGoogleSheets(){
if(getDataFromGoogleSheetsAsArray()[0]=='updateQuiz'){
questions=getDataFromGoogleSheetsAsArray()[1].split('*-^questions*-^');
answers=getDataFromGoogleSheetsAsArray()[2].split('*-^answers*-^');
choices=getDataFromGoogleSheetsAsArray()[3].split('*-^choices*-^');
populateQuizPane();
}else{
setValue('scoreDisplay',getDataFromGoogleSheetsAsArray()[0]);
if(!(getDataFromGoogleSheetsAsArray()[0].indexOf("Invalid")>-1||getDataFromGoogleSheetsAsArray()[0].indexOf("Email")>-1)){
showAnswers();}else{
}
}
}
function populateQuizPane(){
var quiz=''
for(var i=0;i<questions.length;i++){
quiz=quiz+"<div style='padding:40px;font: 20px Calibri;'>"+"<div style='padding:10px 10px'>"+(i+1)+". "+questions[i]+"</div>"+getSearchBarUi(true,i)+"</div>";
setRecordToSearch(choices,i);
}
document.getElementById('quizPane').innerHTML=quiz;
}
function mark(){
var score=0;
for(var i=0;i<10;i++){
if(getValue('searchInput'+i)==answers[i].trim()){score=score+1;}
}
sendDataToGoogleSheets(['mark',sheet,getValue('email'),getValue('password'),score],googleSheetsGradeBook);
}
function showAnswers(){
for(var i=0;i<10;i++){
if(getValue('searchInput'+i)==answers[i].trim()){
document.getElementById('searchInput'+i).style.backgroundColor='lightgray';
}else{document.getElementById('searchInput'+i).style.backgroundColor='orangeRed';
}}
}
function emailPassword(){
sendDataToGoogleSheets(['emailPassword',getValue('email')],googleSheetsGradeBook);
}
</script>
</html>