Improved tutorial

controllers/before-begin/index.js

@@ -0,0 +1,8 @@
+module.exports.index = function(req, res) {
+    res.setHeader('Content-Type', 'text/html');
+
+    res.render('index.jade', res.locals, function(err, result) {
+        res.send(result);
+    });
+};
+

controllers/before-begin/urls.js

@@ -0,0 +1,3 @@
+module.exports = {
+    '/before-begin': 'index',
+};

controllers/before-begin/views/index.jade

@@ -0,0 +1,12 @@
+extends ../../../views/base.jade
+
+block content
+    h1 Now, things are getting serious
+    p.
+        You completed the tutorial ! Now, things are getting serious. There
+        will be three scenes coming to you. Your mission is simple : you have
+        to find the 8 red coins. There may be recommendations like the ones you
+        saw in the tutorial : they are here to help you to move around. Use
+        them if they help you, ignore them if they seem useless.
+
+    p You can start <a href='/prototype/arrows'>when you're ready</a> !

controllers/intro/index.js

@@ -0,0 +1,8 @@
+module.exports.index = function(req, res) {
+    res.setHeader('Content-Type', 'text/html');
+
+    res.render('index.jade', res.locals, function(err, result) {
+        res.send(result);
+    });
+};
+

controllers/intro/urls.js

@@ -0,0 +1,3 @@
+module.exports = {
+    '/intro': 'index',
+};

controllers/intro/views/index.jade

@@ -0,0 +1,12 @@
+extends ../../../views/base.jade
+
+block content
+    h1 Welcome !
+    p This game will be in four steps :
+        ol
+            li We'll ask you a little information so we can know you a little.
+            li Then, you will try a tutorial of a 3D interface.
+            li When you finish the tutorial, the main part will start. There will be 3 scenes and you will be asked to complete tasks.
+            li Once you finished, there will be a short questionnary so we can know what you think of our interface.
+
+    h2 You can now <a href="/user-study">start when you are ready</a>

controllers/prototype/views/tutorial.jade

@@ -9,3 +9,7 @@ block title
 block configjs
     script Recommendation = L3D.ArrowRecommendation;
     script(src="/static/js/tutorial.min.js")
+
+block lastbutton
+    button#next.btn.btn-success.navbar-btn(style={'margin-right':'10px', 'margin-bottom':'10px', 'display':'none'})
+        span Go to the next step

js/l3d/apps/prototype/tutorial/TutorialSteps.js

@@ -111,7 +111,7 @@ var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container
             justclick:false
         },
         {
-            text: "Congratulations ! You've successfully finished the tutorial ! <a href=\"/prototype/empty\">Click here</a> to start.",
+            text: "Congratulations ! You've successfully finished the tutorial ! Click on the green button to continue !",
             justclick: false
         }
     ];

js/l3d/apps/prototype/tutorial/main.js

@@ -62,6 +62,13 @@ function main() {
     // Log fps
     setInterval(function() {logfps(stats.getFps());}, 500);
 
+    Coin.onLastCoin = function() {
+        $('#next').click(function() {
+            window.location = '/before-begin';
+        });
+        $('#next').show();
+    };
+
 }
 
 function initThreeElements() {

views/main.jade

@@ -6,7 +6,7 @@ mixin button_link(href)
             block
 
 block links
-    div.navbar-collapse.collapse
+    //-div.navbar-collapse.collapse
         ul.nav.navbar-nav
             li
                 a(href="#{urls.bouncing}") Bouncing cube