A REPORT

on
DISCOURSE PLUGIN

BY

Names of students: ID.No.

Divya Prabhu 2017A7PS0001G
Animesh Sasan 2017A7PS0036G
Jineet Desai 2017A7PS0168G
Raghav Prasad 2017A7PS0297G

AT

Homi Bhabha Centre For Science Education,TIFR

A Practice School-I station of

BIRLA INSTITUTE OF TECHNOLOGY & SCIENCE, PILANI

(July, 2019)

1
 A REPORT

ON

DISCOURSE PLUGIN

BY

Names of theStudents ID.No. Discipline

Divya Prabhu 2017A7PS0001G Computer Science
Animesh Sasan 2017A7PS0036G Computer Science
Jineet Desai 2017A7PS0168G Computer Science
Raghav Prasad 2017A7PS0297G Computer Science

Prepared in partial fulfilment of the

Practice School-I Course
AT
Homi Bhabha Centre For Science Education,TIFR
A Practice School-I station of

BIRLA INSTITUTE OF TECHNOLOGY & SCIENCE

(July, 2019)

2
ACKNOWLEDGEMENTS

We would like to extend our sincere gratitude towards ​Dr.

K. Subramaniam​, director of ​Homi Bhabha Centre for
Science Education, TIFR for giving us the opportunity of
interning at his prestigious institute as a part of the ​Birla
Institute of Technology and Science, Pilani, PS
program​. We are extremely grateful for the support of our
project coordinator ​Prof. Nagarjuna G.​, who conducted
our orientation and without whose guidance and support
we could not have achieved the progress we have in the
Discourse-plugins project. He is a true inspiration as an
active Open Source developer and upholds the prestige of
Open Source as chairperson of Free Software Foundation,
India.
We are sincerely grateful to ​Mr. Siddhu Dhangar for
solving all our doubts during the development process and
steering us forward in the project.
We also wish to acknowledge the help from our PS
Faculty Incharge, ​Dr. Mukesh Kumar Rohil ​for guiding us
through the Practice School Course.

3
 BIRLA INSTITUTE OF TECHNOLOGY AND SCIENCE
PILANI (RAJASTHAN)
Practice School Division

Station: ​Mumbai Centre: ​HBCSE

Duration: From: ​21/05/19​ To:​ 12/07/19
Date of Submission: ​08/07/19
Students​:
DIVYA PRABHU 2017A7PS0001G
ANIMESH SASAN 2017A7PS0036G
JINEET DESAI 2017A7PS0168G
RAGHAV PRASAD 2017A7PS0297G
Title Of Project: Discourse-plugins

Experts​: Dr. Nagarjuna G. (Project Coordinator)

PS Faculty​: Dr. Mukesh Kumar Rohil

Key Words​: Open source software, e-learning, discourse,

ruby-on-rails, ember js, html, css

Project Areas​: Web development

Abstract​: This report presents a description of the work done to

make plugins for discourse for suggesting the post/prerequisite
topics for a certain post by a user by a user of certain privilege
level.

Signature of Student: Signature of Instructor:

Date: Date:

4
Contents

1. ​Introduction 6

2. ​Objectives 9

3. ​Project Development 11
3.1 ​Softwares used​………………………………………. 11
3.1.1 ​Docker​………………………………………… 11
3.1.2 ​Ruby on rails​…………………………………. 11
3.1.3 ​Ember.js​………………………………………. 12
3.2 ​Developing the Plugin​……………………………….. 12
3.3 ​Technical Details​……………………………………… 14

4. ​Code 20

5. ​Summary 21

6. ​Conclusion 22

7. ​References 23

5
CHAPTER 1
 
INTRODUCTION

“We’ve arranged a global civilization in which most crucial

elements profoundly depend on science and technology. We have
also arranged things so that almost no one understands science
and technology”
- Carl Sagan

With a broad goal to encourage the growth of scientific literacy in

the country, HBCSE has developed a variety of materials aimed
at disseminating science and technology among the public.

STEM games is one such attempt to promote research in

Science, Technology, Engineering, and Mathematics. It's a
learning-based collaborative platform which has resources for
educators and organizations seeking to learn more about STEM
education. What is so novel about the STEM games platform is
that it seeks to spread STEM knowledge primarily through an
experiential pedagogy, focussing more on experimentation and
“doing” rather than content consumption.

6
About the platform: Discourse
STEM Games platform has been built upon an existing platform
called Discourse. Discourse is a 100% open source discussion
platform built to be used in a variety of ways.

One of the most significant features of Discourse is a uniquely

envisaged trust system which allows for civilized discussion. This
is of great importance when creating knowledge networks, which
STEM Games strives to achieve. The trust system implies that the
community builds a natural immune system to defend itself from
trolls, bad actors, and spammers — and the most engaged forum
members can assist in the governance of their community. There
is also a simple flagging system. Positive behaviors are
encouraged through likes and badges. Users are also awarded
trust levels as they prove their reliability in the community and
they receive more powers and responsibilities as they upgrade.

We will be making use of this trust system in the implementation

of our plugin.

Here are some of the other salient features of Discourse:

● Community moderation
● Spam blocking
● Badges
● Two-factor authentication
● Social media integration
● Topic summarization
● Easy collaboration

7
 ● Comprehensive APIs
● One-click upgrades
● 100% open source

STEM Games is one of the many novel applications of the

Discourse platform and our plugin will be a step forward in terms
of allowing Discourse to be used as an LMS.

Having given the context of our work, we now present the

problem statement.

Problem statement: ​To create a plugin that enables Discourse

users above a certain privilege level to be able to access a
custom interface to organize existing topics into a desired
arrangement.

This problem is of great significance in a platform like

STEMGames wherein this plugin can help Discourse function like
an LMS.

8
CHAPTER 2
 
Objectives
The objectives of this project touch various aspects of online
learning and discussions. The main goal of this project is to
enable the users of a certain privilege to add suggested
post/prerequisite topics to a certain topic on discourse. This will
help streamline the learning process for the users and provide
them with a structured learning system. The step by step goals
are summarised as follows-

1. Creating an option for adding prerequisites for every topic

This step aims at adding one more option to the admin panel
called ‘Topic-organizer’ for adding post/prerequisites to a given
topic.

2. Opening a pop-up form and sequencing the topics

Clicking the ‘topic organizer’ button opens a pop-up form that
contains a search-list to add the prerequisite topics for a post. It
even offers to sequence the topics to be displayed in a particular
order.
 
3. Storing the contents on a database
The selected topics must be stored for a given topic on
postgre-sql so as to display it on the page. Using our plugin, we
will create a new table in the existing Discourse database. The
schema for which is roughly as follows:

topic_id next_topics prev_topics sequence_on

9
topic_id will be a unique ID identifying each topic. next_topics will
be a comma-separated list of topic_ids which will identify topics
added as post requisite topics. prev_topics will be a
comma-separated list of topic_ids which will identify prerequisite
topics. So, for example:

topic_id next_topics prev_topics sequence_on

10109 20101,20117 10102, 10103, false
10106

would imply that for the topic referenced by the ID 10109, the
post-requisites are the topics referenced by the IDs 20101 and
20117 and the prerequisites for the same are the topics
referenced by the IDs 10102, 10103 and 10106.

4. Accessing and displaying the post/prerequisites:

From the database, we must content and-requisites below a
particular topic content and the prerequisites above the topic
content.

10
CHAPTER 3
 
Project Development
 
3.1 Softwares used
Our project majorly used the following softwares:
 
3.1.1 Docker
Docker is an open-source project that automates the deployment
of applications inside software containers. A docker container
holds a software in a complete file-system that contains every
dependency: code, run-time, system tools, system libraries -
anything that one can install on a server. This guarantees uniform
behavior, independent of the underlying host OS environment.
Docker provides an extra layer of abstraction and automation of
operating system level virtualization on Linux, without actually
using a virtual machine. It uses resource isolation features of
Linux kernel like cgroups and kernel namespaces, and a
union-capable file system such as aufs and others to allow
‘containers’ to run within a single Linux instance, avoiding the
overhead of starting and maintaining virtual machines.

 
3.1.2 Ruby on Rails
Ruby on Rails is a web application framework that includes
everything needed to create database-backed web applications
according to the Model-View-Controller (MVC) architecture.
Moreover, it is open-source and written in Ruby (which is also
open-source). It is an extremely productive web-application
framework which allows you to develop web application ten times

11
faster than Java frameworks. Rails shun configuration files in
favor of conventions, reflection, and dynamic runtime extensions.

 
3.1.3 Ember.js
Ember.js is an open-source JavaScript web framework, based on
the Model–view–viewmodel (MVVM) pattern. It allows developers
to create scalable single-page web applications by incorporating
common idioms and best practices into the framework.
Ember is used on many popular websites, including Discourse,
Groupon,LinkedIn, Vine,​ ​Twitch.tv, and Chipotle. Although
primarily considered a framework for the web, it is also possible to
build desktop and mobile applications in Ember.

 
3.2 Developing the Plugin
1. There was a need for Discourse to be used as an LMS.
2. A topic organizer plugin was conceptualized to streamline
the flow of learning
3. Workflow:
a. We coded for an option to be included in the topic
admin menu after every topic. The topic admin menu is
only visible to the admins and staff. Our plugin includes
a custom button in the topic admin menu which will only
be visible to users above a certain ​trust level​. This
minimum trust level can be set by the admins in the
plugin settings page.
b. On clicking the button, a pop-up form shows up with a
search bar to search for topics to be included as
post/prerequisites.

12
c. Both the pop-up form with the search bar and the
button was created using Handlebars as a templating
tool and Ember.js was used to program the functionality
of the button and the search bar in the pop-up form.
d. On entering the search term, a list of topics drops down
as results, each with a checkbox next to it to allow the
user to select/deselect it.
e. Once selected, the topics will be available in a space
below the search bar
f. A radio button is available to switch between selecting
prerequisites and post-requisites.
g. A submit button will be available at the bottom of the
form, clicking this will submit the desired changes which
will then be pushed to the database in the table
mentioned in ​Chapter 2, Section 3 (page 9)
h. Following this, we will render the changes stored in the
database.

13
 
3.3 Technical details

Admin menu
User above a given privilege level, are shown an extra button in
the action bar. Clicking this button opens up the admin menu.
This menu allows administrators to perform a number of
functions including deleting topics, change topics etc.

Fig 1: Topic admin menu

The minimum trust level can be set by admin in the plugin settings
as shown in the figure below:

14
 Fig 2: Plugin settings page

The topic admin menu is part of a widget. The customization of

this widget was achieved by a code interface provided by
Discourse. This is illustrated below:

import​ { withPluginApi } ​from​ ​'discourse/lib/plugin-api'​;

import​ showModal ​from​ ​"discourse/lib/show-modal"​;
/*
Some code here
*/

export​ ​default​ {
initialize(container) {
withPluginApi(​'0.8.24'​, ​function​(api) {

// some code here

api.decorateWidget('topic-admin-menu:adminMenuButtons',
(decorator) => {
// Adds the button to the admin menu
// and also allows for formatting of the button

return {
icon: 'tasks',

15
 fullLabel: 'tl_post_lock.button_label',
action: 'actionTlLock'
}
});

api.attachWidgetAction('topic-admin-menu', 'actionTlLock',
() => {
// api.attachWidgetAction allows us to code the
functionality of the button

// here is the code for the actions to be performed when

The topic organizer button is clicked
}

}
}
}

16
TOPIC ORGANIZER

The option to organize topics is added to the admin menu to by

the plugin. This option when selected open ups a pop-up which
allows the user to add post and prerequisites for the current topic.

Fig 3: Popup form

Search
The search bar takes the typed input from the user and parses
the available topic names. It then outputs a list of topic names
with the given sequence of characters in their topic name. We
have made sure that the current topic is not displayed in the given
list. Only if a given topic is selected from the list will the plugin
allow the topic to be added to the post/prerequisite list. Hence, the
plugin will not allow a non-existent topic to be added.

17
 Fig 4: Search bar

The topics that appear in the search bar are obtained by the ​fetch
function of javascript. The list of existing topics was fetched using
an API provided by Discourse. The response obtained was
converted to JSON format and then the topics were stored in an
array. Finally the search bar performs a filter on the topics list
according to the input given by the user in the search text field.

Database
The database uses JSON format to store the details of the
prerequisites as well as the post-requisites of a particular topic.
JSON (JavaScript Object Notation) is a lightweight
data-interchange format. It is easy for humans to read and write. It
is easy for machines to parse and generate. It is based on a
subset of the JavaScript Programming Language. We have used
the JSON element to store the topic_id of the post/prerequisite
topics. While displaying the required topic we extract the required
information of the topic from the topic_id of a given topic.

Fig 5: Screenshot of plugin_store_rows table in Discourse DB

18
Displaying Post/prerequisites
In order to extend the Discourse web interface,discourse has
provided a mechanism called plugin outlets in handlebars
templates.It’s an extension point in the template that plugin
authors can use to add their own handlebars markup.
To display Prerequisites and Post Topics the plugin-outlets used
are topic-title and topic-above-footer-buttons respectively. The
use of these outlets allowed to display prerequisite topics after
topic title and post topics after the main content of current topic.

Fig 6: Custom widget spaces to display pre/post topics

Additional feature: Sequencer

The sequencer allows at most 1 pre and 1 post topic to be added to the
current topic. The display of the added topics is also modified. Instead of a
button with the name of the topic, the pre/post topic(s) are displayed as
previous/next buttons respectively. This allows for a navigation-like
experience for the user. The plugin user can use this feature by checking
the ​Sequence on?​ option in the popup form.

19
CHAPTER 4
 
Code
The directory structure of the plugin:
discourse-topic-organizer/
├── app
│ ├── controllers
│ │ ├── ​custom-public-button_controller.rb
│ │ └── ​notes_controller.rb
│ └── ​note_store.rb
├── assets
│ ├── javascripts
│ │ └── discourse
│ │ ├── connectors
│ │ │ └── after-topic-footer-main-buttons
│ │ │ └── ​custom-public-button.js.es6
│ │ ├── initializers
│ │ │ ├── ​admin_button.js.es6
│ │ │ └── ​prereq.js.es6
│ │ ├── models
│ │ │ └── ​note.js.es6
│ │ └── templates
│ │ └── connectors
│ │ ├── after-topic-footer-main-buttons
│ │ │ └── ​custom-public-button.hbs
│ │ ├── topic-above-footer-buttons
│ │ │ └── ​postreq.hbs
│ │ └── topic-title
│ │ └── ​prereq.hbs
│ └── stylesheets
│ └── ​custom-public-button.css
├── config
│ ├── locales
│ │ ├── ​client.en.yml
│ │ └── ​server.en.yml
│ └── ​settings.yml
├── ​plugin.rb
└── README.md

20
CHAPTER 5
 
A SUMMARY OF THE WORKFLOW

21
CHAPTER 6
 
CONCLUSION
We succeeded in making the discourse-topic-organizer plugin.
The plugin, as of now, has the following features:
● A button added to the topic admin menu widget which is
the starting point of the use of the plugin
● A search bar to search for the existing topics
● Radio buttons to separate selected topics to be added as
pre or post topics
● A sequencer option which allows at most 1 pre and 1 post
topic to be added to the current topic
● Two widget spaces, 1 each to display pre and post topics
assigned to the current topic
● The plugin has been designed so that it can be used only
by users above a certain ​trust level​. This trust level can be
adjusted by the admins in the plugin settings page

Github link: ​https://github.com/jineetd/discourse-topic-organizer

22
CHAPTER 7
 
REFERENCES
● Ember.js:
https://guides.emberjs.com/release/tutorial/ember-cli/
● Discourse plugin:
https://meta.discourse.org/t/beginners-guide-to-creating-disc
ourse-plugins-part-1/30515
● Github: ​https://github.com/discourse/discourse
● Stack Overflow: ​https://stackoverflow.com/
● W3School:
https://www.w3schools.com/howto/howto_js_filter_lists.asp
● HTML: ​https://html-online.com/articles/simple-popup-box/

23