我正在尝试使用google apps脚本创建我的第一个webapp。我正在尝试按照示例操作,但无法正常工作。我创建了一个stylesheet.html选项卡以及我的主要html页面。但是我所有的格式都无法正常工作。我以为Google将这些文件附加在一起。仅供参考,如果我将样式包含在主页底部,则可以很好地使用它们。这是我的code.gs页面:
function doGet() {
return HtmlService.createHtmlOutputFromFile('frontpage')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
这是我的名为frontpage.html的主页:
<!DOCTYPE html>
<html lang="en">
<?!= HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>
<!-- google scripts says to not include header & body tags ?? -->
<meta charset="utf-8">
<title>Borah Physics</title> <!-- google syas not to use title tag need another way to set title.-->
<h1><div style="text-align:center">Physics Homework</div></h1>
<!--List of available assignments. This needs to be updated as assignments are added.
Add assignment name and the ssID of the spreadsheet containing the questions.
when clicked need to return value (ssid) as sheetID.-->
<select id="assignment">
<option sheetID="1ajedscAjuXDsUOcQRzru5-bhUIluGn3fPPsoN-Ww5wU">Kinematics 1</option>
<option sheetID="10mCGpLRwv8ETFbW3RwisI45s_x3-ZItatzq_vU0wacs">Dynamics</option>
</select>
<!--Question should be string variable activeQuestion It will get updated when the question number changes.-->
<div id="question">
<br>
<br>
Question Here
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
<br> <br>
</div>
<!-- If question has an image it will go here.-->
<div id="qImage">
Along with image (if needed)
<br>
</div>
<!-- This is the user inputed answer. It needs to be recorded in the response sheet of the spreadsheet and
compared to the correct answer. (in the comparison we need to add a within x% variable so if the answer
is close it is counted as correct. This accounts for thinks like g=10 m/s^2 vs 9.8 m/s^2.-->
<div id="answer">
<label>Answer:</label>
<input type="text" name="answer"/>
<input type="Submit" value="Submit"/>
<br>
<br>
</div>
<!-- bottom navigation list-->
<ul id="nav">
<li><a> </a></li>
<li><input type="button" onclick="previous()" value="Previous"></li> <!-- goes to previous question (calls previous function)-->
<li><a > Correct: 4/12 </a></li> <!-- need to insert variables #correct & total # questions-->
<li><input type="button" onclick="next()" value="Next"></li> <!-- goes to next question (calls next function).-->
<li><a> </a></li>
</ul>
最后是我的stylesheet.html页面
<style>
#assignment{
width: 20%; margin: 10 ;
position: absolute;
right: 10px;
}
#question {
width: 90%; margin: 0 auto;
}
#qImage{
width: 90%; margin: 0 auto;
}
#answer {
width: 90%; margin: 0 auto;
}
#nav {
text-align: justify;
min-width: 400px;
}
#nav:after {
content: '';
display: inline-block;
width: 100%;
}
#nav li {
display: inline-block;
}
</style>
我的输出在页面顶部显示,就像在显示文本一样。因此,我没有将样式表连接到首页。我什至没有尝试了解函数或JavaScript。有很多东西要学。(我希望这是一个物理作业应用程序,我希望在上学之前就可以开始工作!)感谢所有帮助。有辅导老师吗?谢谢。
在功能中更改createHtmlOutputFromFile
为。createTemplateFromFile
doGet()
应该:
return HtmlService
.createTemplateFromFile('frontpage')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
如果文件中包含scriptlet,则它是模板。您的frontpage
文件中包含一个scriptlet。脚本是:
<?!= HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>
您也可以从脚本中调用服务器功能,而不是直接在脚本中使用HtmlService。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句