mbti-test
/
index.html

<!doctype html>
<html ng-app="app">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/main.css">
  <script src="js/angular.min.js" charset="utf-8"></script>
  <script src="js/main.js" charset="utf-8"></script>
</head>

<body ng-controller="MainCtrl">
  <div class="container">

    <div class="row" style="margin-bottom: 50px;">
      <div class="col-md-12">
        <h1>发现您的个性类型</h1>
        <p class="lead">下面是一个MBTI（迈尔斯布里格斯测试指标）测试，给出了你的个性是什么基准。它描述了你的大脑主要是如何工作的。</p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 --col-md-offset-2">
        <div ng-repeat="question in questions" class="separator">
          <h3 style="margin-bottom:15px;">{{question.title}}</h3>
          <div class="row" style="margin-bottom: 50px;">
            <div class="col-md-6" ng-repeat="selection in question.selections">
              <a href="#" class="btn btn-block" ng-disabled="question.selected === selection" ng-click="answer(selection, question, $event)" ng-class="question.selected === selection ?
                    'btn-success' : 'btn-default'">
                  {{selection.label}}
                </a>
            </div>
          </div>
        </div>
        <a class="btn btn-success" ng-click="submit($event)">告诉我结果</a>
      </div>
    </div>
    <div class="row text-center" ng-if="result">
      <div class="alert alert-info">
        <h1><a ng-href="{{result.weburl}}" ng-bind="result.type"></a></h1>
        <ul class="list-inline">
          <li ng-repeat="trait in result.traits">
            {{trait.typeName}} ({{trait.percentage}}%)
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>