mirror of
https://github.com/Raghu-Ch/TurtleFactsQuiz.git
synced 2026-02-10 03:33:01 -05:00
170 lines
8.5 KiB
HTML
170 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" ng-app = "turtleFacts">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>Turtel Fact Quiz</title>
|
||
<!-- Bootstrap css and my own css -->
|
||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<div class="container">
|
||
<div class="page-header">
|
||
<h1>Turtle Facts Quiz</h1>
|
||
<h3>Learn about all the turtles below before you decide to take on the
|
||
<strong>TURTLE QUIZ</strong>
|
||
</h3>
|
||
</div>
|
||
<!-- Hook on the controller for this view and specify when to show it using ng-hide -->
|
||
<div ng-controller = "listCtrl as list" ng-hide = "list.quizMetrics.quizActive">
|
||
<form class = "form-inline well well-sm clearfix">
|
||
<span class = "glyphicon glyphicon-search"></span>
|
||
<input type="text" placeholder ="search" class="form-control" ng-model = "list.search">
|
||
<button class = "btn btn-warning pull-right" ng-click = "list.activateQuiz()">
|
||
<strong>Start Quiz</strong>
|
||
</button>
|
||
</form>
|
||
<div class="row">
|
||
<div class="col-sm-6" ng-repeat = "turtle in list.data | filter:list.search">
|
||
<div class="well well-sm">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<img ng-src ="{{turtle.image_url}}" class = "img-rounded img-responsive well-image">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<h4>{{turtle.type}}</h4>
|
||
|
||
<p><strong>Locations:</strong>{{turtle.locations}}</p>
|
||
<p><strong>Size:</strong>{{turtle.size}}</p>
|
||
<p><strong>Average Lifespan:</strong>{{turtle.lifespan}}</p>
|
||
<p><strong>Dite:</strong>{{turtle.dite}}</p>
|
||
|
||
<button class = "btn btn-primary pull-right"
|
||
data-toggle= "modal"
|
||
data-target = "#turtle-info"
|
||
ng-click = "list.changeActiveTurtle(turtle)">Learn More</button>
|
||
|
||
</div>
|
||
</div> <!-- row -->
|
||
</div> <!-- well -->
|
||
</div> <!-- col-sm-6 -->
|
||
</div>
|
||
|
||
<!-- the markup for the modal -->
|
||
<div class= "modal" id = "turtle-info">
|
||
<div class= "modal-dialog">
|
||
<div class= "modal-content">
|
||
<div class= "modal-header">
|
||
<h2>{{list.activeTurtle.type}}</h2>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
<div class="col-xs-8 col-xs-offset-2">
|
||
<img ng-src="{{list.activeTurtle.image_url}}" class = "img-rounded img-responsive well-image">
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<p><strong>locations:</strong>{{list.activeTurtle.locations}}</p>
|
||
<p><strong>Size:</strong>{{list.activeTurtle.size}}</p>
|
||
<p><strong>Average Lifespan:</strong>{{list.activeTurtle.lifespan}}</p>
|
||
<p><strong>Dite:</strong>{{list.activeTurtle.dite}}</p>
|
||
</div>
|
||
<div class="col-xs-12 top-buffer">
|
||
<p>{{list.activeTurtle.description}}</p>
|
||
|
||
<button class="btn btn-danger pull-right"
|
||
data-dismiss="modal">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- modal markup ends -->
|
||
|
||
</div> <!-- container -->
|
||
|
||
<!-- quizCtrl -->
|
||
<div ng-controller = "quizCtrl as quiz" ng-show ="quiz.quizMetrics.quizActive">
|
||
|
||
<div class="row">
|
||
<div class="col-xs-8">
|
||
<h3>progress:</h3>
|
||
<div class="btn-toolbar">
|
||
<button class="btn"
|
||
ng-repeat = "question in quiz.dataServices.quizQuestions"
|
||
ng-class = "{'btn-info': question.selected !== null, 'btn-danger': question.selected == null}">
|
||
<span class="glyphicon"
|
||
ng-class ="{'glyphicon-pencil': question.selected !== null, 'glyphicon-question-sign': question.selected == null}"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="col-xs-4">
|
||
<div class="row">
|
||
<h4>Legend:</h4>
|
||
<div class="col-sm-4">
|
||
<button class="btn btn-info">
|
||
<span class="glyphicon glyphicon-pencil"></span>
|
||
</button>
|
||
<p>Answered</p>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<button class="btn btn-danger">
|
||
<span class="glyphicon glyphicon-question-sign"></span>
|
||
</button>
|
||
<p>Unanswered</p>
|
||
</div>
|
||
</div>
|
||
</div> <!-- legend ends -->
|
||
</div> <!-- progress section -->
|
||
|
||
<div class="row">
|
||
<h3>Question:</h3>
|
||
<div class="well well-sm">
|
||
<div class="row">
|
||
<div class="col-xs-12">
|
||
<h4>{{quiz.activeQuestion+1 + ". " + quiz.dataServices.quizQuestions[quiz.activeQuestion].text}}</h4>
|
||
</div>
|
||
</div>
|
||
<div class="row"
|
||
ng-if = "quiz.dataServices.quizQuestions[quiz.activeQuestion].type === 'text'" >
|
||
<div class="col-sm-6" ng-repeat = "answer in quiz.dataServices.quizQuestions[quiz.activeQuestion].possibilities">
|
||
<h4 class ="answer">
|
||
{{answer.answer}}
|
||
</h4>
|
||
</div>
|
||
</div>
|
||
<div class="row"
|
||
ng-if = "quiz.dataServices.quizQuestions[quiz.activeQuestion].type === 'image'">
|
||
<div class="col-sm-6" ng-repeat = "answer in quiz.dataServices.quizQuestions[quiz.activeQuestion].possibilities">
|
||
<div class="image-answer">
|
||
<img ng-src="{{answer.answer}}">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- ng-click will call the questionAnswered method on the controller -->
|
||
<button class = "btn btn-warning" ng-click = "quiz.questionAnswered()">Continue</button>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div> <!-- quizCtrl ends -->
|
||
</div> <!-- container ends -->
|
||
<!-- third party scripts -->
|
||
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script> -->
|
||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
|
||
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
|
||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
||
<!-- application scripts -->
|
||
<script src ="js/app.js"></script>
|
||
<script src ="js/controllers/list.js"></script>
|
||
<script src ="js/controllers/quiz.js"></script>
|
||
<script src ="js/factories/quizmetrics.js"></script>
|
||
<script src ="js/factories/dataServices.js"></script>
|
||
</body>
|
||
</html>
|