2015-07-12 76 views
0

我正在尝试使用Google应用程序脚本创建我的第一个Web应用程序。我试图按照例子,但它不工作。我创建了一个stylesheet.html标签以及我的主html页面。但是我的格式都没有工作。我认为谷歌一起附加文件。仅供参考,如果我将它们包含在主页的底部,我的样式工作正常。 这是我的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 >&nbsp;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> 

我的输出显示在页面的顶部,就好像它是文本一样。所以我没有将样式表连接到FrontPage。 我甚至没有试图理解函数或JavaScript呢。很多学习。 (这是一个物理作业应用程序,我希望在学校开始之前就能开始工作!)所有帮助表示感谢。那里有任何导师? 谢谢。

+0

我不确定,但它可能会工作,请在您的stylesheet.html中添加type = text/css作为