Google Apps Script CardService.setContent as HTML

I am using CardService in my Google Scripts Adds-On. I am trying to setContent as HTML for that I am reading it from Index.html. But while rendering it's printing CSS and Javascript as text rather then using it in Html content.

function buildPage() {
  var html = HtmlService.createHtmlOutputFromFile('Index').getContent();
  var card = CardService.newCardBuilder();
  card.setHeader(CardService.newCardHeader().setTitle('How do you feel ...'));
  var section = CardService.newCardSection()
    .setHeader("<h4>What do you want? </h4>");

  section.addWidget(CardService.newKeyValue()
    .setTopLabel('choose one')
    .setContent(html)
);

This is my Index.html:

    <!DOCTYPE html>
    <html>
     <head>
      <base target="_top">
       <style>
           #things {
             position: absolute;
             top: 50%;
             left: 50%;
             color: green;
             margin-right: -50%;
             text-align: center;
          }
       </style>
     </head>
     <body>
       <p>List of things:</p>
       <ul id="things">
         <li>Loading...</li>
       </ul>

       <script
         src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
       </script>
       <script>
       // The code in this function runs when the page is loaded.
       $(function() {
        google.script.run.withSuccessHandler(showThings)
        .getLotsOfThings();
       });

       function showThings(things) {
         var list = $('#things');
         list.empty();
         for (var i = 0; i < things.length; i++) {
           list.append('<li>' + things[i] + '</li>');
         }
      }
      </script>
     </body>
   </html>

Upvotes: 0