Skip to content

C
ConceptXBlock
Commit f6498108 by Piotr Mitros
Options

Renames continued...

parent 951adde2
Showing with 289 additions and 0 deletions
xoncept/__init__.py 0 → 100644
from .xoncept import XonceptXBlock
xoncept/static/css/sample.css 0 → 100644
div {
font-family: 'Open Sans', Verdana, Geneva, sans-serif, sans-serif;
color: #444444;
}
p {
color: #222222;
}
ul.obj_drop {
display:inline-block;
height:260px;
width:280px;
border:1px solid;
overflow-y:scroll;
overflow-x:clip;
padding-left: 0px;
}
div.subheader {
margin-left:auto;
margin-right:auto;
text-align:center
width:600px;
}
div.description {
padding: 5px;
border: 1px solid #d4d4d4;
color: #444444;
background-color: #F6F4F0;
height:200px;
width:587.5px;
float: left;
margin:5px 0px 0px 3px;
}
div.searchbox {
padding: 5px;
border: 1px solid #d4d4d4;
color: #444444;
background-color: #F6F4F0;
height:200px;
width:287.5px;
float: left;
margin:5px 2px 0px 0px;
}
div.objectives {
padding: 5px;
border: 1px solid #d4d4d4;
color: #444444;
background-color: #F6F4F0;
height:300px;
width:290px;
float: left;
margin:0px;
}
div.bottom {
width:940px;
height:210px;
margin:0px;
}
div.obj_title {
display:inline-block;
width:150px;
}
div.obj_icons {
display:inline-block;
}
div.objective_desc {
width:280px;
height:25px;
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-size:small;
padding:5px;
}
xoncept/static/html/sample.html 0 → 100644
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Concept Map XBlock</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="sample.css" />
<script id="lo-template" type="text/x-handlebars-template">
<div class="lo_drag" style="border:1px solid #DDDDDD; width:200px; height:55px; display:inline-block; background-color: #FCFCFC; border-radius: 3px; padding:0px">
<div style="block;background-color: #F0F0F0; height:20px; padding:3px;">
<div class="obj_title"> {{title}} </div>
<div class="obj_icons"> <a href="/wiki/{{title}}"><span style="display:inline-block;" class="ui-icon ui-icon-pencil"></span></a> <span style="display:inline-block;" class="ui-icon ui-icon-close lo_close"></span> </div>
</div>
<div class="objective_desc">
{{render}}
</div>
</div>
</script>
</head>
<body>
<div>
<div class="header"> Learning objectives </div>
<div class="objectives">
<div class="subheader">Taught </div>
<ul id="taught" class="obj_drop">
</ul>
</div>
<div class="objectives">
<div class="subheader">Exercised </div>
<ul id="exercised" class="obj_drop">
</ul>
</div>
<div class="objectives">
<div class="subheader">Required </div>
<ul id="required" class="obj_drop"> </ul>
</div>
</div>
<div class="bottom">
<div class="searchbox">
<div class="search">
<label for="tags">Search: </label>
<input class="search_input" size=16>
</div>
<div class="search_results">
</div>
</div>
<div class="description">
Description
</div>
</div>
<!--div id="foo" style="display:inline-block"></div-->
</body>
<script type="text/javascript" src="sample.js">
</script>
</html>
xoncept/static/js/sample.js 0 → 100644
var lo_source = $("#lo-template").html();
var template = Handlebars.compile(lo_source);
function update_item(item, slug, full)
{
item.data('slug',slug);
item.data('render',full);
item.mouseover(function() {
$(".description").html("<h1>"+slug+"</h1><p>"+full+"</p>");
})
item.find(".lo_close").mouseup(function(event){item.remove()});
dump_state();
}
function create_item(slug, full)
{
var html = template({title:slug, render:full});
var domitem = $(html);
update_item(domitem, slug, full);
domitem.draggable({
appendTo: "body",
helper: function(event) {return create_item(slug, full);},
connectToSortable: ".obj_drop",
drop : function(event, ui) { console.log(ui.helper); console.log(ui.draggable); }
});
return domitem;
}
function add_search_item(slug, full)
{
$(".search_results").append(create_item(slug, full));
}
function dump_state()
{
state = {'taught' : $("#taught").find(".lo_drag").map(function(){return $(this).data("slug")}).toArray(),
'exercised': $("#exercised").find(".lo_drag").map(function(){return $(this).data("slug")}).toArray(),
'required' : $("#required").find(".lo_drag").map(function(){return $(this).data("slug")}).toArray()
};
$.post("/update/", state).done( function(data){
} ).fail( function(data){
console.log("Could not save");
console.log(state);
} );
return state;
}
function refresh_search(search_string)
{
$.getJSON("http://pmitros.edx.org:8000/get_concept_list", {'q':search_string}, function(data) {
$(".search_results").text("");
for (var i = 0; i<data.length; i++) {
add_search_item(data[i], "Hello World");
}
})
}
$(function() {
//var html = template({title:"Hello", render:"Hello world example"});
//$("#foo").html(html);
$(".obj_drop").sortable({
connectWith: ".obj_drop",
update : function(event, ui) { dump_state(); },
beforeStop: function(event, ui) {
update_item(ui.item, ui.helper.data("slug"), ui.helper.data("render"));
//console.log(ui.helper.data("slug"));
//ui.placeholder.css("border", "5px solid");
//ui.item.css("border", "5px solid");
//ui.helper.css("border", "5px solid");
}
}).disableSelection();
refresh_search("");
$(".search_input").change(function(){
refresh_search($(".search_input").val());
});
});
xoncept/xoncept.py 0 → 100644
"""TO-DO: Write a description of what this XBlock is."""
import pkg_resources
from xblock.core import XBlock
from xblock.fields import Scope, Integer, String
from xblock.fragment import Fragment
class XonceptXBlock(XBlock):
"""
This XBlock will play an MP3 file as an HTML5 Xoncept element.
"""
# Fields are defined on the class. You can access them in your code as
# self.<fieldname>.
src = String(
scope = Scope.settings,
help = "URL for MP3 file to play"
)
def resource_string(self, path):
"""Handy helper for getting resources from our kit."""
data = pkg_resources.resource_string(__name__, path)
return data.decode("utf8")
# TO-DO: change this view to display your data your own way.
def student_view(self, context=None):
"""
The primary view of the XonceptXBlock, shown to students
when viewing courses.
"""
html = self.resource_string("static/html/Xoncept.html")
print self.src
print html.format
frag = Fragment(html.format(src = self.src))
frag.add_css(self.resource_string("static/css/Xoncept.css"))
frag.add_javascript(self.resource_string("static/js/src/Xoncept.js"))
frag.initialize_js('XonceptXBlock')
print self.xml_text_content()
return frag
# TO-DO: change this to create the scenarios you'd like to see in the
# workbench while developing your XBlock.
@staticmethod
def workbench_scenarios():
"""A canned scenario for display in the workbench."""
return [
("XonceptXBlock",
"""<vertical_demo>
<Xoncept src="http://localhost/Ikea.mp3"> </Xoncept>
<Xoncept src="http://localhost/skull.mp3"> </Xoncept>
<Xoncept src="http://localhost/monkey.mp3"> </Xoncept>
</vertical_demo>
"""),
]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment