====== Skills - Technical Specification ======
===== Objective =======
Implement Skills using deep learning AI algorithms which will be used to narrow down courses/certifications/live events/in person events as per the users interest with a minimum number of Q&A from user.
===== Functionality =======
Skill are used to filter courses/certifications/live events/in person events based on a set of questions which will be present in the wizard panel. Initially, all the products are displayed in the map view. Based on the answer to the first question the resulting set of items would be displayed in the map and if needed it would trigger the second question. The number of questions should be as minimum as possible.
All this should be implemented through deep learning concept.
An easy way to add all products related to a skill, to mylearning/cart based on free/paid products respectively should also be implemented.
===== Workflow =======
* Filtering products based on Skills should be using deep learning concept.
* Skills are nothing but key words.
* Key words are extracted from the title/description of the product, categories/tags associated with the product.
* Based on the answer to the first question the products are filtered out using AI algorithms. If needed a second question with choices is presented to the user, which will further help to narrow down the search.
* The number of questions should be as minimum as possible.
=== DB Changes ===
==TBD==
=== Model level Changes ===
==TBD==
==== Skills page ====
The catalog tab is displayed by default. On clicking on the Catalog tab, a dropdown with an option to go to ‘Skills’ page opens.
- It has two views, one is "List view" and the other is the "Map view". Map view is the default view inside the Skills page.
- It has two panels, left panel displays courses and the right panel is called the wizzard panel which has the options for filtering/sorting skills and lists the skills.
=== Wizzard panel ===
- The wizzard panel contains the questions.
- Based on the answer to the first question the products will be filtered using deep learning AI algorithms.
- If needed, a second question is triggered using deep learning AI algorithms. The number of questions should be as minimum as possible.
=== Algorithm ===
Keep the following points in mind to filter out products based on the driving question.
Step 1: Filter based on keywords from the answer to the first question. Search for products with matching keywords in title, description, tags, categories.
Setp 2: Find out similar users: This can be done by comparing max number of products enrolled in common and using the common search history.
Step 3: Filter the products purchased/enrolled by similar users.
Step 4: Narrow down the results based on ratings of products.
Step 5: Filter further based on the products recently viewed by similar users.
Step 6: Use keywords from previous searches on the resultant set (For example: Previous search is about Ruby on rails and the current search is on programming, then the results would be filtered out to get ruby on rails programming)
In case the result set has more number of records ask the next question with options having the major keywords from the result set. Repeat step 1 to 6 based on the choice made.
=== Map view ===
Use Vuejs for the skills view implementation.
Example code to display products randomly in the map view, zoomin and zoomout, dragging the map once zoomed:
**HTML:**
**JS:**
var zoomlevel = 0
Vue.component('map-component', {
template: ``,
props: {
item: Object,
}
})
jQuery(document).ready(function(){
jQuery("#zoom_in").click(function () {
zoomlevel += 1
jQuery("#products_in_map").animate({ 'zoom': zoomlevel }, 400);
});
jQuery("#zoom_out").click(function () {
if(zoomlevel > 0){
zoomlevel -= 1
jQuery("#products_in_map").animate({ 'zoom': zoomlevel }, 400);
}
});
jQuery(".draggable").draggable();
});
=== Progress of the enrolled course ===
Use ProgressBar.js. Same plugin as we use in performexa team reviews page.
=== Displaying the Filtered courses based on Skills ===
TBD
=== Add all animation ===
Example code to achieve the popup animation:
**HTML:**
Course A
Course B
Add All
**JS:**
jQuery('#add_all').click(function(e){
jQuery('.individual_course').each(function(index, course){
setTimeout(function(){
jQuery(course).addClass("popout");
setTimeout(function(){
jQuery(course).removeClass('popout')
}, 500);
},index*1000);
});
});
**CSS:**
#add_all, .individual_course {
background: #000;
color: #fff;
font-size: 2em;
margin: 10px;
width: 100px;
}
.popout {
animation: popout 0.5s ease;
-webkit-animation: popout 0.5s ease;
}
@keyframes popout {
from{transform:scale(1)}
80%{transform:scale(1.1)}
to{transform:scale(1)}
}
@-webkit-keyframes popout {
from{-webkit-transform:scale(1)}
80%{-webkit-transform:scale(1.1)}
to{-webkit-transform:scale(1)}
}
Example code to achieve the animation when all the courses completes poping up and a single circle goes to the cart.
jQuery("#add_all_animation_button").animate({ marginLeft: "+=250px"},{
duration: 3000,
complete: function (){
jQuery("#add_all_animation_button").hide();
}
});
Re-implement the "ajax loader" using jQuery's ajax callback functions such as ajaxStart(). (see : http://api.jquery.com/ajaxStart/) and once the ajax is finished, use another callback function such as "success" or "complete" to replace the ajax-loader. (see http://api.jquery.com/jQuery.ajax/) to implement the progress line when the items are added to the cart.
=== Loader ===
Odometer plugin (https://github.com/HubSpot/odometer) can be used to achieve the animation of numbers inside the loader.
=== Skills listing - Tag Cloud view ===
TBD
=== List view ===
TBD
=== Clickthrough ===
https://invis.io/AFACGXC3D
=== Document and Markups ===
https://docs.google.com/document/d/1u9o_mqyjC2NwziRbGSwgbSQiXxuChVdbT43v8JYnyak/edit