How to install Quescheetah to your Jekyll blog
You can check completed sample widget and sample dashboard first. Enjoy!
Jekyll is simple static blog engine hosted by Github. In this tutorial, we'll quickly add our simple vote widget in your Jekyll blog with Quescheetah.
1. Go our website and build your own questions.
First, Let's go to our Quescheetah website and sign up. You can click the last "login" button of nav bar to signup. We provide account creation via
- Our own sign up form
When you use your social account, Quescheetah signup is only available when you agree on our app authentication. We are collecting only two things, email and username.
If you finished signup process, you already logined or you can easily do this by clicking login button one more time. Your username will be displayed on our navbar and when click your name you can see the dropdown. Let's click the "account" button.
There is only email information of our account yet. But we can see many other things soon. So from now, we can get our own api key. Api key is the key that used to say "This request is from { John doe }". Simply click the "Get my api key" button to make our api key. Then we can see the screen below.
The api key and other options are shown. But we'll not handle other complex options. The next step is very important. To enroll domains. Why we have to do this?
The api key we use will be included as header when sending requests. It's easily discovered by other people and can be used by them. But the domain that will be enrolled with your account is checked in our server when handling requests. We check that if the request origin url is same to enrolled domain or not. So after we enroll our custom domain, we don't have to worry our api key will be stealed. This is simmilar to Cross-Origin Resource Sharing concept.
Enroll our "quescheetah.com" domain so we can use your api key inside our website. And also enroll "127.0.0.1:4000" for Jekyll test and your real blog domain({your-github-username}.github.io).
Finished this? Okay. Finally we are going to make our questions. Click your username of navbar and in this time, click the "Questions" button.
The screen shows simple stack-like view. Your questions will be stacked when created, and you can click the left checkbox to filter things. Click the top "Make a new question?" button and go to next step.
In this tutorial, we are going to build simple group question which includes 2 questions. Click "+ Add Contact" tab button to change question. Fill in the form as following and don't forget to write upper group name. Group name field appears when you make second question.
- group name = qc_demo
- (question_1)Question title = Are you coming to my blog again?
- (question_1)Question text = Are you coming to my blog again?
- (question_1)Answer text1 = Of course!
- (question_1)Answer text2 = Never
- (question_2)Question title = Is this post helpful to you?
- (question_2)Question text = Is this post helpful to you?
- (question_2)Answer text1 = Yes!
- (question_2)Answer text2 = Not at all...
Good! If you completely finished, you can see our group question and following info. Since nobody answered our questions yet, Useranswer count is zero. If something went wrong, just click the upper "X" button to delete this. Lastly we need to know what is the id of this group question. Click the white box and move to dashboard page. In this page we can check the id. Graph doesn't show anything cause there is no useranswer.
2. Make sure your Jekyll blog includes Bootstrap and jQuery library.
Our widget was made with some components like tab and grid css. So whenever user wants to customize the widget, It can be easily manipulated. Download jQuery v2+ and bootstrap v3+. Don't forget to download js file and css file of Bootstrap. We need both. You can directly download files or use CDN instead.
After download, locate these files properly at your base html file.
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>My Blog</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="{{ site.baseurl }}public/css/poole.css">
<link rel="stylesheet" href="{{ site.baseurl }}public/css/syntax.css">
<link rel="stylesheet" href="{{ site.baseurl }}public/css/hyde.css">
<link rel="stylesheet" href="{{ site.baseurl }}public/css/mycss.css">
</head>
<body>
{% include sidebar.html %}
<div class="content container">
{{ content }}
</div>
</body>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</html>
3. Download bundle.js file and Quescheetah SDK file.
All you need to download in our site is just one JavaScript file. We provide all html, css, Javascript elements(including SDK file) inside bundle file. The only thing you have to do is making one div tag that provides two attributes, id and (gid/qid).
The div tag is like as following.
<div id="systemjs-sample" gid="5"></div>
Id is supposed to be "systemjs-sample". The script inside bundle file looks for our div by this id value. This tutorial is targeted to the page that includes only one widget. So, If you want to change this you have to customize seperate script file we provides.
Our "gid/qid" attribute shows which question is supposed to be here. If you made a group question, use "gid". Otherwise in the case you made a single question, use "qid". Wirte your id value that we checked before in dashboard page.
And lastly, in bundle-0.0.1.js file, find the config object that includes 'apiKey', 'callBackUrl', 'receiveRealtimeResponse' key. Then put your api key as value of 'apiKey'. Default value would be 'your-api-key'. If you completed this process everything is ready.
$__System.register('7', ['10'], function (_export) {
'use strict';
var config, qc;
return {
setters: [function (_) {}],
execute: function () {
config = {
'apiKey': 'b3e9d78456671bd24be1041c16d6e689afec27d6',
'callBackUrl': 'http://localhost:8000',
'receiveRealtimeResponse': false
};
qc = new QuesCheetah(config);
_export('qc', qc);
}
};
});
4. Restart the Jekyll and check results in your dashboard
Did you save the code we modified? Then, go to the directory that your Jekyll blog is installed. Restart with the command "jekyll s" and confirm the local result in your browser.
Of course you can vote to the questions in local envirnment. Your "useranswer" data will be saved after the POST method request is sent. When all question was answered, result Bootstrap modal shows, and page is reloaded automatically.
After page reloaded, answer buttons have been disabled. It's because that our bundle script saved cookie about each question in your browser. Therefore answering twice in same question could be blocked. If you delete cookie with console window or browser setting, you can vote again.
Let's go to quescheetah dashboard page again and in this time the screen shows our graphs!
You can search other graphs also in nav bar. "Overview" shows overall timeline graph and bar chart per question. In "Analysis" you can make your own filter. Graphs are re-rendered whenever you make a different filter. So it is enjoyable to analysis the relation between questions. Lastly in "Users" all useranswer data about this group/question is shown. You can serch by keywords of unique name and question text also with our filter.
Completed results can be checked in the links.
Thank you for reading our first tutorial. Enjoy!