Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

jdh
jdh
12,334 Points
Posted by jdh
jdh
12,334 Points

Making a Game with AngularJS to populate a modal on click

After reading the thread on doing the PairUpToCode javascript challenges, I've decided I'm going to try to make a jeopardy game.

After watching some tutorials, it looks like Angular would be a good spot for this kind of task.

The idea is to have a board that has 5 columns x 4 rows like jeopardy. Then, when the user clicks on a certain question a modal window pops up with the question as well as 4 potential answers.

I am using Bootstrap for my CSS 

<html ng-app="modalTest">
    <head>
        <script src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
        <script src="http://code.angularjs.org/1.2.16/angular-sanitize.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/bower-angular-translate/2.0.1/angular-translate.min.js"></script>
        <script src="js/ui-bootstrap-tpls-0.11.0.min.js"></script>
        <script src="js/dialogs-default-translations.min.js"></script>
        <script src="js/dialogs.min.js"></script>
        <script src="js/dialogTest.js"></script>

        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/dialogs.css">

        <style>
            body { padding: 20px; }
            .my-class .modal-body {
                background-color: #eee;
            }
            .my-class .modal-footer {
                margin-top: 0;
            }

        .question{
            height:100px;
            vertical-align: middle;
            text-align: center;
            padding-top: 35px;
            cursor: pointer;
        }

        </style>
    </head>
    <body ng-controller="dialogServiceTest">
        <div class="row">
            <div class="col-md-12">
                <h1>Javascript Jeopardy</h1>
                <p>Click on a category below. </p>
            </div>
        </div>
            <div class="container">
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="text-center col-md-2 col-md-offset-1"><h4>Section One</h4></div> <!-- offset to center odd number of columns -->
        <div class="text-center col-md-2"><h4>Section Two</h4></div>
        <div class="text-center col-md-2"><h4>Section Three</h4></div>
        <div class="text-center col-md-2"><h4>Section Four</h4></div>
        <div class="text-center col-md-2"><h4>Section Five</h4></div>
        <div class="clearfix"></div> <!-- clearfix squares the header around the headings. it basically fixes everything -->
    </div>
    <div class="panel-body" id="main-board">
        <div class="category col-md-2 col-md-offset-1">
            <div class="well question">100</div>
            <div class="well question">200</div>
            <div class="well question">300</div>
            <div class="well question">400</div>
        </div>
        <div class="category col-md-2">
            <div class="well question">100</div>
            <div class="well question">200</div>
            <div class="well question">300</div>
            <div class="well question">400</div>
        </div>
        <div class="category col-md-2">
            <div class="well question">100</div>
            <div class="well question">200</div>
            <div class="well question">300</div>
            <div class="well question">400</div>
        </div>
        <div class="category col-md-2">
            <div class="well question">100</div>
            <div class="well question">200</div>
            <div class="well question">300</div>
            <div class="well question">400</div>
        </div>
        <div class="category col-md-2">
            <div class="well question">100</div>
            <div class="well question">200</div>
            <div class="well question">300</div>
            <div class="well question">400</div>
        </div>
    </div>
    <div class="panel-footer">
        <div class="pull-right"><h4>Score: <span id="score">0</span></h4></div>
        <div class="clearfix"></div>
        </div>
</div>
</div>

What I would like to do is have a modal window that populates questions and answers from a js file but I'm unsure of how to do this. Does anyone have a resource or idea of how to do something like this to get me started?

Thanks