Skip to content

E
edx-platform
Commit 1e59ec80 by Valera Rozuvan
Options

Changed style of poll module. Old coontent from conditional now will be replaced… 

Changed style of poll module. Old coontent from conditional now will be replaced with new content instead of being appended.
parent b51c43be
Showing with 181 additions and 125 deletions
common/lib/xmodule/xmodule/css/poll/display.scss
......@@ -38,71 +38,133 @@ section.poll_question {
}
.poll_answer {
-webkit-appearance: none;
-webkit-background-clip: padding-box;
-webkit-border-image: none;
-webkit-box-align: center;
-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px inset;
-webkit-font-smoothing: antialiased;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
-webkit-writing-mode: horizontal-tb;
background-clip: padding-box;
background-color: rgb(238, 238, 238);
background-image: -webkit-linear-gradient(top, rgb(238, 238, 238), rgb(210, 210, 210));
border-bottom-color: rgb(202, 202, 202);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(202, 202, 202);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(202, 202, 202);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(202, 202, 202);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: solid;
border-top-width: 1px;
box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px inset;
box-sizing: border-box;
color: rgb(51, 51, 51);
cursor: pointer;
/* display: inline-block; */
display: block;
clear: both;
margin-bottom: 20px;
.question {
height: auto;
clear: both;
min-height: 60px;
.button {
-webkit-appearance: none;
-webkit-background-clip: padding-box;
-webkit-border-image: none;
-webkit-box-align: center;
-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px inset;
-webkit-font-smoothing: antialiased;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
-webkit-writing-mode: horizontal-tb;
background-clip: padding-box;
background-color: rgb(238, 238, 238);
background-image: -webkit-linear-gradient(top, rgb(238, 238, 238), rgb(210, 210, 210));
border-bottom-color: rgb(202, 202, 202);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(202, 202, 202);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(202, 202, 202);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(202, 202, 202);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: solid;
border-top-width: 1px;
box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px inset;
box-sizing: border-box;
color: rgb(51, 51, 51);
cursor: pointer;
/* display: inline-block; */
display: inline;
float: left;
font-family: 'Open Sans', Verdana, Geneva, sans-serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: bold;
letter-spacing: normal;
line-height: 25.59375px;
margin-bottom: 15px;
margin: 0px;
padding: 0px;
text-align: center;
text-decoration: none;
text-indent: 0px;
text-shadow: rgb(248, 248, 248) 0px 1px 0px;
text-transform: none;
vertical-align: top;
white-space: pre-line;
width: 60px;
height: 60px;
word-spacing: 0px;
writing-mode: lr-tb;
}
.button.answered {
-webkit-box-shadow: rgb(97, 184, 225) 0px 1px 0px 0px inset;
background-color: rgb(29, 157, 217);
background-image: -webkit-linear-gradient(top, rgb(29, 157, 217), rgb(14, 124, 176));
border-bottom-color: rgb(13, 114, 162);
border-left-color: rgb(13, 114, 162);
border-right-color: rgb(13, 114, 162);
border-top-color: rgb(13, 114, 162);
box-shadow: rgb(97, 184, 225) 0px 1px 0px 0px inset;
color: rgb(255, 255, 255);
text-shadow: rgb(7, 103, 148) 0px 1px 0px;
}
.text {
display: inline;
float: left;
width: 80%;
text-align: left;
min-height: 60px;
margin-left: 20px;
height: auto;
margin-bottom: 20px;
}
}
.stats {
min-height: 40px;
margin-top: 20px;
clear: both;
.bar {
width: 85%;
height: 28px;
border: 1px solid black;
display: inline;
float: left;
margin-right: 10px;
.percent {
background-color: gray;
width: 300px;
height: 28px;
}
}
.number {
width: 80px;
display: inline;
float: right;
height: 28px;
text-align: right;
}
}
}
.poll_answer {
font-family: 'Open Sans', Verdana, Geneva, sans-serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: bold;
height: auto;
letter-spacing: normal;
line-height: 25.59375px;
margin-bottom: 15px;
margin-left: 90px;
margin-right: 90px;
margin-top: 15px;
padding-bottom: 7px;
padding-left: 18px;
padding-right: 18px;
padding-top: 6px;
text-align: center;
text-decoration: none;
text-indent: 0px;
text-shadow: rgb(248, 248, 248) 0px 1px 0px;
text-transform: none;
vertical-align: top;
white-space: pre-line;
/* width: 78px; */
word-spacing: 0px;
writing-mode: lr-tb;
}
.poll_answer.answered {
......
common/lib/xmodule/xmodule/js/src/conditional/display.coffee
......@@ -20,5 +20,6 @@ class @Conditional
if (((response.passed is true) && (@passed is false)) || (@passed is null))
@el.data 'passed', response.passed
@el.html ''
@el.append(i) for i in response.html
XModule.loadModules @el
common/lib/xmodule/xmodule/js/src/poll/poll_main.js
......@@ -10,7 +10,7 @@ define('PollMain', ['logme'], function (logme) {
PollMain.prototype = {
'showAnswerGraph': function (poll_answers, total) {
var dataSeries, tickSets, c1, _this, totalValue;
var _this, totalValue;
totalValue = parseFloat(total);
if (isFinite(totalValue) === false) {
......@@ -19,75 +19,25 @@ PollMain.prototype = {
_this = this;
// Show the graph answer DOM elementfrom.
this.graphAnswerEl.show();
dataSeries = [];
tickSets = {};
c1 = 0;
$.each(poll_answers, function (index, value) {
var numValue, text;
var numValue, percentValue;
numValue = parseFloat(value);
if (isFinite(numValue) === false) {
return;
}
c1 += 1;
text = _this.jsonConfig.answers[index].substring(0, 10);
tickSets[c1.toFixed(1)] = text;
percentValue = (numValue / totalValue) * 100.0;
dataSeries.push({
'label': '' + value + '/' + total,
'data': [[c1, (numValue / totalValue) * 100.0]]
_this.answersObj[index].statsEl.show();
_this.answersObj[index].numberEl.html('' + value + ' (' + percentValue.toFixed(1) + '%)');
_this.answersObj[index].percentEl.css({
'width': '' + percentValue.toFixed(1) + '%'
});
});
jQuery.plot(
_this.graphAnswerEl,
dataSeries,
{
'xaxis': {
'min': 0,
'max': c1 + 1,
'tickFormatter': function formatter(val, axis) {
var valStr;
valStr = val.toFixed(axis.tickDecimals);
if (tickSets.hasOwnProperty(valStr)) {
return tickSets[valStr];
} else {
return '';
}
}
},
'yaxis': {
'min': 0,
'max': 105,
'tickFormatter': function formatter(val, axis) {
return val.toFixed(axis.tickDecimals) + ' %';
}
},
'lines': { 'show': false },
'points': { 'show': false },
'bars': {
'show': true,
'align': 'center',
'barWidth': 0.5
},
'legend': {
'show': true,
'backgroundOpacity': 0
}
}
);
},
'submitAnswer': function (answer, answerEl) {
'submitAnswer': function (answer, answerObj) {
var _this;
// Make sure that the user can answer a question only once.
......@@ -98,7 +48,7 @@ PollMain.prototype = {
_this = this;
answerEl.addClass('answered');
answerObj.buttonEl.addClass('answered');
if (debugMode === true) {
(function () {
......@@ -163,10 +113,52 @@ PollMain.prototype = {
// When the user selects and answer, we will set this flag to true.
this.questionAnswered = false;
this.answersObj = {};
$.each(this.jsonConfig.answers, function (index, value) {
var answerEl;
var answer;
answer = {};
_this.answersObj[index] = answer;
answer.el = $('<div class="poll_answer"></div>');
answer.questionEl = $('<div class="question"></div>');
answer.buttonEl = $('<div class="button"></div>');
answer.textEl = $('<div class="text"></div>');
answer.questionEl.append(answer.buttonEl);
answer.questionEl.append(answer.textEl);
answer.el.append(answer.questionEl);
answer.statsEl = $('<div class="stats"></div>');
answer.barEl = $('<div class="bar"></div>');
answer.percentEl = $('<div class="percent"></div>');
answer.barEl.append(answer.percentEl);
answer.numberEl = $('<div class="number"></div>');
answer.statsEl.append(answer.barEl);
answer.statsEl.append(answer.numberEl);
answer.statsEl.hide();
answer.el.append(answer.statsEl);
answer.textEl.html(value);
answer.el.appendTo(_this.questionEl);
answer.buttonEl.on('click', function () {
_this.submitAnswer(index, answer);
});
if (index === _this.jsonConfig.poll_answer) {
answer.buttonEl.addClass('answered');
_this.questionAnswered = true;
}
answerEl = $('<div class="poll_answer">' + value + '</li>');
/*
answerEl = $('<li class="poll_answer">' + value + '</li>');
answerEl.on('click', function () {
_this.submitAnswer(index, answerEl);
});
......@@ -177,6 +169,7 @@ PollMain.prototype = {
}
answerEl.appendTo(_this.questionEl);
*/
});
this.graphAnswerEl = $('<div class="graph_answer"></div>');
......
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