1. CloudCard
The Interactive Learning Tool for the
Connected Classroom
By Marc Bacvanski

2. Goal: Make learning
more engaging outside
of the classroom

3. The solution
Teacher-created flashcards
that integrate with Google
Spreadsheets
Android-based app for
student studying
Web application for teachers
to see data on student
studying

4. Flow of Interactions
Teacher
Student
Create Deck
Google
Spreadsheets
Register Deck
My web app:
cloudcard.us
Access Code
Enters access
code for deck
Access Code
Gives access
code to students
Studying
Student studies the
deck materials
Statistics
Statistics on
student studying

5. System Diagram
Teacher Student
Web app in the cloud
Google Sheets

6. Features: Teacher
Easy Organization
Teachers can easily
organize their decks of
cards
Statistics Platform Deck Management
Powerful platform for data
analysis: gives feedback
for teachers' student's
behavior
Intuitive interface to easily
manage decks
100% Cloud Based
Completely cloud based,
allowing teachers to
access the system from
anywhere on the world

7. ● Refined UI highlights
important aspects
● Simple to use, powerful
features underneath the
hood
Easy Organization

8. Student Statistics
● See when students are studying
● How many students have
studied?
● Lets teachers better refine their
techniques

9. Flashcard Management: Google Sheets
● Integration with Google
Spreadsheets
● Easy import and export of cards
● Security: Random access code
generation
● Future: Interactive, multimedia
content in cards

10. ● Readily scalable
● High reliability
● Low cost: no installation necessary
● Ready for global usage
● Connect from anywhere in the world
Cloud Based

11. Features: Android App
Intuitive UI
Easy to learn, powerful to
use to enhance learning
outside of the classroom
Material Design Saved Decks
Google's Material Design
for clean and simple
interactions
Decks are downloaded and
cached for offline use
Bug Reporting
Advanced bug reporting
using Instabug

12. Intuitive UI & Material Design

13. Saved Decks: Offline Studying
● Students can study on the go
● Decks are automatically saved
after first download
● Fast, easy way to learn without
an internet connection

14. ● Integration with Instabug
● User shakes device to send
feedback
● Bug reports show stack
trace and other user data
to help diagnose the
problem
Bug Reporting: Instabug

15. Technologies Used

16. Open sourced on GitHub:
github.com/Flashcard-App/

17. MVC Architecture
This app uses a
Model-View-Controller
architecture.
● Model: How the data is
represented
● View: How the user
interacts with the app
● Controller: Changes the
model

18. Fragment Transactions

19. Fragment Inheritance
Fragments inherit from a common
IntermediateFragment, allowing several
things:
● Backwards and forward navigation
● Shared implementation of common
methods
● Standardized methods for
navigation
IntermediateFragment
● previous : IntermediateFragment
● next : IntermediateFragment
● @Override
...
CardQuizFragment EnterCode

20. Classes and Resource
Organization
● 2,824 lines of code
● Java, JavaScript, EJS, CSS,
XML
● Vector graphic design
● Custom JSON Serialization
● Google Spreadsheet integration

21. REST Web Application
● Google OAuth2
● Asynchronous, scalable
Node.js
● MongoDB database
● Running in Google Compute
Engine
● Separate servers for database,
back-end data collection, and
web app for teachers

22. Questions?
Marc Bacvanski
marc.bacvanski@gmail.com
linkedin.com/in/mbacvanski
github.com/mbacvanski