vcgit-forge/TurtleFactsQuiz
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/TurtleFactsQuiz.git synced 2026-02-10 11:33:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

Quiz App initial commit and added bootstrap modal for markup as well

Browse Source
This commit is contained in:
Raghu-Ch
2017-01-31 21:18:20 -08:00
commit 31310b60ea
4 changed files with 202 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
index.html Normal file
View File

@@ -0,0 +1,93 @@
<!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">
<div class="row">
<div class="col-sm-6" ng-repeat = "turtle in list.data">
<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 -->
</div>
<!-- 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>
</body>
</html>