Created survey from webmap and its feature service

Esri · Jun 6, 2015 · 33c7a49 · 33c7a49
1 parent 8137c0a
commit 33c7a49
Show file tree

Hide file tree

Showing 27 changed files with 1,777 additions and 0 deletions.
diff --git a/images/FB-f-Logo__blue_29.png b/images/FB-f-Logo__blue_29.png
diff --git a/images/Twitter_logo_blue_29.png b/images/Twitter_logo_blue_29.png
diff --git a/images/empty-heart.png b/images/empty-heart.png
diff --git a/images/empty-star.png b/images/empty-star.png
diff --git a/images/filled-heart.png b/images/filled-heart.png
diff --git a/images/filled-star.png b/images/filled-star.png
diff --git a/images/gp-29.png b/images/gp-29.png
diff --git a/images/left-arrow.png b/images/left-arrow.png
diff --git a/images/right-arrow.png b/images/right-arrow.png
diff --git a/images/splash.jpg b/images/splash.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Photo Survey</title>
+
+    <!-- Bootstrap styles -->
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
+
+    <!-- Custom styles -->
+    <link href="styles.css" rel="stylesheet">
+</head>
+<body>
+    <h1 class="screenreaderInfo">Photo-based survey</h1>
+
+    <!-- Splash overlay and social media sign-in -->
+    <h2 class="screenreaderInfo">Social media sign-in</h2>
+    <aside id="signinPage" class="pageFill splashBackground">
+        <div id="signinBlock" class="smallSidebar transparent">
+            <div id="signinTitle" class="signinTitle"></div>
+            <div id="signinParagraph" class="signinParagraph"></div>
+            <div id="socialMediaButtonArea" class="socialMediaButtonArea transparent" data-dojo-attach-point="buttonArea">
+                <div id="signinLoginPrompt" class="signinLoginPrompt"></div>
+                <div class="socialMediaButton facebookOfficialColor" style="background-image:url('images/FB-f-Logo__blue_29.png')">Facebook</div>
+                <div class="socialMediaButton twitterOfficialColor" style="background-image:url('images/Twitter_logo_blue_29.png')">Twitter</div>
+                <div class="socialMediaButton googlePlusOfficialColor" style="background-image:url('images/gp-29.png')">Google+</div>
+            </div>
+        </div>
+    </aside>
+
+    <!-- Content page -->
+    <main id="contentPage" class="conditionalPageFill container-fluid transparent">
+        <div class="row fillHeight">
+
+            <h2 class="screenreaderInfo">Photo gallery</h2>
+            <article class="mainContent fillHeight col-sm-9 col-md-9 repad">
+                <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
+                  <!-- Wrapper for slides -->
+                  <div id="carouselSlidesHolder" class="carousel-inner" role="listbox"></div>
+
+                  <!-- Indicators -->
+                  <ol id="carouselIndicatorsHolder" class="carousel-indicators"></ol>
+
+                  <!-- Left and right controls -->
+                  <a id="leftCarouselCtl" class="left carousel-control carousel-control-heartTL" href="#carousel" role="button" data-slide="prev">
+                    <img src="images/left-arrow.png" class="glyphicon glyphicon-chevron-right" aria-hidden="true"></img>
+                    <span class="sr-only">Previous</span>
+                  </a>
+                  <a id="rightCarouselCtl" class="right carousel-control carousel-control-heartTL" href="#carousel" role="button" data-slide="next">
+                    <img src="images/right-arrow.png" class="glyphicon glyphicon-chevron-right" aria-hidden="true"></img>
+                    <span class="sr-only">Next</span>
+                  </a>
+                </div>
+                <div id="hearts" class="heartsTL heartsBackground">
+                    <img id="emptyHeart" class="heart" src="images/empty-heart.png" aria-hidden="false"></img>
+                    <img id="filledHeart" class="heart" src="images/filled-heart.png" aria-hidden="false"></img>
+                </div>
+            </article>
+
+            <div class="sidebarContent fillHeight col-sm-3 col-md-3 repad">
+                <h2 class="screenreaderInfo">User information</h2>
+                <span id="helpButton" aria-label="help" role="button"
+                    class="glyphicon glyphicon-question-sign pull-right help-icon"
+                    data-toggle="modal" data-target="#additionalInfoPanel"></span>
+                <div class="dropdown">
+                    <span class="lg-a" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="name"></span>
+                        <span id="score" class="badge"></span><span class="caret"></span>
+                    </span>
+                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                        <li id="userProfileSelection"><span role="menuitem" tabindex="-1">Profile</span></li>
+                        <li id="userSignoutSelection"><span role="menuitem" tabindex="-1">Sign out</span></li>
+                    </ul>
+                </div>
+                <div class="page-title">Property Survey</div>
+
+                <h2 class="screenreaderInfo">Survey</h2>
+                <article id="survey" role="form">
+                    <div id="surveyContainer" class="form-frame"></div>
+                    <div class="action-bar">
+                      <button id="skipBtn" type="button" class="btn skip-button">Skip</button>
+                      <button id="submitBtn" type="submit" class="btn pull-right submit-button">Submit survey</button>
+                    </div>
+                    <div id="SURVEY_RESULTS" style="padding:4px;border-left:white solid 7px"><!-- //??? --></div>
+                </article>
+
+                <article id="profile" class="transparent">
+                    <div class="profile-frame">
+                        <div id="profileAvatar" class="profileAvatar"></div>
+                        <div id="name2" class="profileName"></div>
+                        <div class="profileCount">
+                            <div id="score2" class="profileCountNum"></div>
+                            <div class="profileCountLabel">surveys completed</div>
+                        </div>
+                        <div id="ranking">
+                            <div id="rankLabel" class="profileRankLabel"></div>
+                            <div id="level" class="profileRankLevel"></div>
+                            <div class="profileRankStars"><img src="images/empty-star.png"/><img src="images/empty-star.png"/><img src="images/empty-star.png"/><img src="images/empty-star.png"/><img src="images/empty-star.png"/></div>
+                            <div class="profileRankBar">
+                                <div id="profileRankBarFill" class="profileRankBarFill"></div>
+                            </div>
+                            <div id="remainingToNextLevel" class="profileRankToGo"></div>
+                        </div>
+                    </div>
+                    <div class="action-bar">
+                      <button id="closeProfileBtn" type="button" class="btn skip-button">&lt; Back to survey</button>
+                    </div>
+                </article>
+
+            </div>
+        </div>
+    </main>
+
+    <!-- Help overlay -->
+    <h2 class="screenreaderInfo">Additional information</h2>
+    <aside id="additionalInfoPanel" class="modal fade" role="dialog">
+        <div class="modal-dialog">
+
+            <!-- Modal content-->
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button aria-label="close help" class="close" data-dismiss="modal">&times;</button>
+                    <span id="helpTitle" class="modal-title"></span>
+                </div>
+                <div id="helpBody" class="modal-body"></div>
+                <div class="modal-footer">
+                    <button aria-label="close help" class="btn btn-default" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+
+        </div>
+    </aside>
+
+    <!-- Bootstrap -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+
+    <!-- AMD module support -->
+    <script data-main="js/app" src="js/lib/require.js"></script>
+</body>
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,15 @@
+// Source:  https://github.com/requirejs/example-jquery-cdn/blob/master/www/js/app.js
+// Place third party dependencies in the lib folder
+//
+// Configure loading modules from the lib directory,
+// except 'app' ones,
+requirejs.config({
+    "baseUrl": "js/lib",
+    "paths": {
+        "app": "../app",
+        "nls": "../nls"
+    }
+});
+
+// Load the main app module to start the app
+requirejs(["app/main"]);