Repository: oppia/oppia

Issue:
A 'Getting started / How it works' page
I've just signed up to Oppia and I have no idea how it works. It would be nice to have a "Getting Started / How it works" page just to give a short walkthrough on how everything works.

I think first time visitors of the website (like me) would find this page really useful.



Discussion:
Have you seen the [about page](https://www.oppia.org/about)? There is a link to the about section underneath the main carousel with the text: Find out more.

Thanks for the suggestion!

I think you're absolutely right -- @wxyxinyu, @markhalpin and I have also been discussing this recently, too. I think that, currently, we aren't being clear enough about what this site is and who it is for, and that we need to change the messaging on both the landing page and the About page to be more empathetic to new visitors who are discovering the site for the first time.

Generally speaking, we want Oppia.org to be a community site where anyone can teach anyone else anything, whilst at the same time contributing to an open commons of learning material that can be improved over time (sort of like Wikipedia). Creators can make "explorations", which are interactive lessons that simulate a tutoring session; this enables the student to learn by doing and to get targeted feedback based on the answers they submit. Since students submit answers (as opposed to, e.g., just watching videos), anyone can see the most common answers/misconceptions and add a line or two to address them so that future students can benefit. This means that the explorations can be improved over time by the community and, over time, collectively grow into a useful learning resource that anyone can benefit from. (Not all of this is fully built out yet, but that's the overall idea.)

FYI, there is also some supporting documentation on oppia.github.io, but I'm not sure how well that would translate to a front page. It's probably better than what's currently on the Oppia.org site, though. :-)

Also, a couple of days ago, I sketched out some ideas for what a revamped front page might look like, but I'm a bit worried that I don't have the design chops to make it look good, and we could do with a bit of development help as well. So, I hope you don't mind my asking, but would either of you be interested in helping out with this? If so, would you be up for meeting up at some point and chatting about it?

Would be very happy to help with this, modulo having somewhat constrained
time to focus on artwork prior to MLK weekend. But would be glad to have a
chat about it at least prior to that.

Mark

On Sun, Dec 27, 2015 at 6:42 PM, Sean Lip notifications@github.com wrote:

> Thanks for the suggestion!
> 
> I think you're absolutely right -- @wxyxinyu https://github.com/wxyxinyu,
> @markhalpin https://github.com/markhalpin and I have also been
> discussing this recently, too. I think that, currently, we aren't being
> clear enough about what this site is and who it is for, and that we need to
> change the messaging on both the landing page and the About page to be more
> empathetic to new visitors who are discovering the site for the first time.
> 
> Generally speaking, we want Oppia.org to be a community site where anyone
> can teach anyone else anything, whilst at the same time contributing to an
> open commons of learning material that can be improved over time (sort of
> like Wikipedia). Creators can make "explorations", which are interactive
> lessons that simulate a tutoring session; this enables the student to learn
> by doing and to get targeted feedback based on the answers they submit.
> Since students submit answers (as opposed to, e.g., just watching videos),
> anyone can see the most common answers/misconceptions and add a line or two
> to address them so that future students can benefit. This means that the
> explorations can be improved over time by the community and, over time,
> collectively grow into a useful learning resource that anyone can benefit
> from. (Not all of this is fully built out yet, but that's the overall idea.)
> 
> FYI, there is also some supporting documentation on oppia.github.io, but
> I'm not sure how well that would translate to a front page. It's probably
> better than what's currently on the Oppia.org site, though. :-)
> 
> Also, a couple of days ago, I sketched out some ideas for what a revamped
> front page might look like, but I'm a bit worried that I don't have the
> design chops to make it look good, and we could do with a bit of
> development help as well. So, I hope you don't mind my asking, but would
> either of you be interested in helping out with this? If so, would you be
> up for meeting up at some point and chatting about it?
> 
> —
> Reply to this email directly or view it on GitHub
> https://github.com/oppia/oppia/issues/1285#issuecomment-167447949.

I think a small section (like the one on GitHub's home page) would be enough for a 'How it Works' page (or something similar), probably with a 'Find out more' link going to a more detailed explanation of how everything else works? This can easily go to Oppia's home page too, so that would save visitors time navigating on the site.

![github](https://cloud.githubusercontent.com/assets/11045720/12019219/ba43ebbe-ad6d-11e5-9bdb-5ac60261a7b1.png)

People won't read everything, so might as well save some time and space by writing straightforward sentences, right?

A quick update for others reading this: there's going to be a small team working on this, consisting mainly of @dsiddarth, @markhalpin and @charisseysabel. Unfortunately, GitHub only lets me put one username in the 'assignee' field, so I'm recording this fact in the comments instead :)


Resolving patch:
diff --git a/core/controllers/pages.py b/core/controllers/pages.py
--- a/core/controllers/pages.py
+++ b/core/controllers/pages.py
@@ -68,12 +68,37 @@ def get(self):
         self.values.update({
             'ABOUT_PAGE_YOUTUBE_VIDEO_ID': ABOUT_PAGE_YOUTUBE_VIDEO_ID.value,
             'CONTACT_EMAIL_ADDRESS': CONTACT_EMAIL_ADDRESS.value,
-            'SITE_FORUM_URL': SITE_FORUM_URL.value,
             'nav_mode': feconf.NAV_MODE_ABOUT,
         })
         self.render_template('pages/about.html')
 
 
+class TeachPage(base.BaseHandler):
+    """Page with information about how to teach on Oppia."""
+
+    def get(self):
+        """Handles GET requests."""
+        self.values.update({
+            'SITE_FORUM_URL': SITE_FORUM_URL.value,
+            'MODERATOR_REQUEST_FORUM_URL': MODERATOR_REQUEST_FORUM_URL.value,
+            'nav_mode': feconf.NAV_MODE_TEACH,
+        })
+        self.render_template('pages/teach.html')
+
+
+class ContactPage(base.BaseHandler):
+    """Page with information about how to contact Oppia."""
+
+    def get(self):
+        """Handles GET requests."""
+        self.values.update({
+            'CONTACT_EMAIL_ADDRESS': CONTACT_EMAIL_ADDRESS.value,
+            'SITE_FORUM_URL': SITE_FORUM_URL.value,
+            'nav_mode': feconf.NAV_MODE_CONTACT,
+        })
+        self.render_template('pages/contact.html')
+
+
 class ParticipatePage(base.BaseHandler):
     """Page with information about participating in Oppia."""
 
diff --git a/feconf.py b/feconf.py
--- a/feconf.py
+++ b/feconf.py
@@ -395,6 +395,8 @@ def get_empty_ratings():
 NAV_MODE_PROFILE = 'profile'
 NAV_MODE_SIGNUP = 'signup'
 NAV_MODE_SPLASH = 'splash'
+NAV_MODE_TEACH = 'teach'
+NAV_MODE_CONTACT = 'contact'
 
 # Event types.
 EVENT_TYPE_STATE_HIT = 'state_hit'
diff --git a/main.py b/main.py
--- a/main.py
+++ b/main.py
@@ -154,13 +154,14 @@ def ui_access_wrapper(self, *args, **kwargs):
 
     get_redirect_route(feconf.SPLASH_URL, pages.SplashPage, 'splash_page'),
     get_redirect_route(r'/about', pages.AboutPage, 'about_page'),
+    get_redirect_route(r'/teach', pages.TeachPage, 'teach_page'),
     get_redirect_route(
         r'/participate', pages.ParticipatePage, 'participate_page'),
     get_redirect_route(
         r'/site_guidelines', pages.ParticipatePage,
         'redirect_to_participate_page'),
     get_redirect_route(
-        r'/contact', pages.AboutPage, 'redirect_to_about_page'),
+        r'/contact', pages.ContactPage, 'contact_page'),
 
     get_redirect_route(r'/forum', pages.ForumPage, 'forum_page'),
     get_redirect_route(r'/terms', pages.TermsPage, 'terms_page'),


Test patch:
diff --git a/core/controllers/admin_test.py b/core/controllers/admin_test.py
--- a/core/controllers/admin_test.py
+++ b/core/controllers/admin_test.py
@@ -22,7 +22,6 @@
 
 BOTH_MODERATOR_AND_ADMIN_EMAIL = 'moderator.and.admin@example.com'
 BOTH_MODERATOR_AND_ADMIN_USERNAME = 'moderatorandadm1n'
-SITE_FORUM_URL = 'siteforum.url'
 
 
 class AdminIntegrationTest(test_utils.GenericTestBase):
@@ -98,10 +97,12 @@ def test_change_configuration_property(self):
 
     def test_change_about_page_config_property(self):
         """Test that the correct variables show up on the about page."""
+        new_contact_email = 'test2@example.com'
+
         # Navigate to the about page. The site name is not set.
         response = self.testapp.get('/about')
-        self.assertIn('https://site/forum/url', response.body)
-        self.assertNotIn(SITE_FORUM_URL, response.body)
+        self.assertIn('CONTACT_EMAIL_ADDRESS', response.body)
+        self.assertNotIn(new_contact_email, response.body)
 
         self.login(self.ADMIN_EMAIL, is_super_admin=True)
         response = self.testapp.get('/admin')
@@ -109,15 +110,15 @@ def test_change_about_page_config_property(self):
         self.post_json('/adminhandler', {
             'action': 'save_config_properties',
             'new_config_property_values': {
-                pages.SITE_FORUM_URL.name: SITE_FORUM_URL
+                pages.CONTACT_EMAIL_ADDRESS.name: new_contact_email
             }
         }, csrf_token)
         self.logout()
 
         # Navigate to the splash page. The site name is set.
         response = self.testapp.get('/about')
-        self.assertNotIn('https://site/forum/url', response.body)
-        self.assertIn(SITE_FORUM_URL, response.body)
+        self.assertNotIn('CONTACT_EMAIL_ADDRESS', response.body)
+        self.assertIn(new_contact_email, response.body)
 
     def test_change_rights(self):
         """Test that the correct role indicators show up on app pages."""
diff --git a/core/controllers/base_test.py b/core/controllers/base_test.py
--- a/core/controllers/base_test.py
+++ b/core/controllers/base_test.py
@@ -200,8 +200,7 @@ class FakeAboutPage(base.BaseHandler):
         def get(self):
             """Handles GET requests."""
             self.values.update({
-                'CONTACT_EMAIL_ADDRESS': ['<[angular_tag]>'],
-                'SITE_FORUM_URL': 'x{{51 * 3}}y',
+                'CONTACT_EMAIL_ADDRESS': ['<[angular_tag]> x{{51 * 3}}y'],
             })
             self.render_template('pages/about.html')