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.
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.
==TBD==
==TBD==
The catalog tab is displayed by default. On clicking on the Catalog tab, a dropdown with an option to go to ‘Skills’ page opens.
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.
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:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="https://unpkg.com/vue@2.3.4"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="map_vue.jsx"></script>
<script>
jQuery(document).ready(function() {
var items = [];
jQuery.ajax({
url: 'http://localhost:3000/api/v1/products.json',
success: function(res) {
new Vue({
el: '#map_table',
data: {
items: res
}
});
jQuery(".skill_course").each(function () {
var randomtop = Math.floor(Math.random() * 101);
var randomleft = Math.floor(Math.random() * 101);
var randomzindex = Math.floor(Math.random() * 101);
jQuery(this).css({
"margin-top": randomtop,
"margin-left": randomleft,
"z-index": randomzindex
});
});
}
});
});
</script>
<style>
#map_wrapper {
width: 500px;
height: 500px;
overflow: hidden;
}
#products_in_map {
background-image: url('bg_brain.png');
background-size: cover;
width: 500px;
height: 500px;
}
#zoom_in {
position: fixed;
top: 200px;
}
#zoom_out {
position: fixed;
top: 220px;
}
</style>
</head>
<body>
<div id="map_wrapper">
<div id="products_in_map" class="draggable">
<table id="map_table">
<tr><td>
<map-component v-for="item in items" :item="item"></map-component>
</td></tr>
</table>
</div>
<div id="zoom_in"> zoom In </div>
<div id="zoom_out"> zoom Out </div>
</div>
</body>
</html>
JS:
var zoomlevel = 0
Vue.component('map-component', {
template: `<div class="skill_course">
<div class="title">
<p> <strong> {{item.product.title}} </strong> </p>
</div>
</div>`,
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();
});
Use ProgressBar.js. Same plugin as we use in performexa team reviews page.
TBD
Example code to achieve the popup animation:
HTML:
<div class="individual_course">
Course A
</div>
<div class="individual_course">
Course B
</div>
<div id="add_all">
Add All
</div>
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.
Odometer plugin (https://github.com/HubSpot/odometer) can be used to achieve the animation of numbers inside the loader.
TBD
TBD
https://invis.io/AFACGXC3D
https://docs.google.com/document/d/1u9o_mqyjC2NwziRbGSwgbSQiXxuChVdbT43v8JYnyak/edit