chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Change of colors and improvement of presentation of results - refs #2600

Browse Source
pull/2588/merge
Alex Aragón 8 years ago
parent 2d8934429b
commit 321095f186
4 changed files with 365 additions and 105 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 175
      app/Resources/public/css/base.css
  2. 287
      main/exercise/MultipleAnswerTrueFalseDegreeCertainty.php
  3. 2
      main/exercise/TestCategory.php
  4. 6
      main/inc/lib/exercise_show_functions.lib.php

175
app/Resources/public/css/base.css
Unescape View File

@ -2531,6 +2531,181 @@ div.admin_section h4 {
margin-top: 20px;
margin-bottom: 25px;
}
/* EXERCISE MATFDC */
.certaintyQuizBox {
border : 1px solid black;
margin : auto;
}
.certaintyQuizColumn {
float : left;
}
/* text at the top of the column */
.certaint-score {
height : 20px;
margin-bottom: 10px;
padding : 0;
text-align: center;
font-size: 22px;
font-weight: bold;
}
.chart-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-gap: 30px;
width: 100%;
margin: 0 auto;
}
.chart-title{
text-align: center;
font-weight: bold;
font-size: 16px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #b3b3b3;
text-transform: uppercase;
background: #ecf0f1;
padding-top: 10px;
}
.certaint-list-two, .certaint-list{
margin: 0;
padding: 0;
list-style: none;
text-align: center;
position: absolute;
bottom: 0;
display: inline-block;
width: 100%;
}
.certaint-list-two li{
display: inline-block;
margin-right: 10px;
width: 40%;
}
.certaint-list li{
width: 50%;
margin: auto;
}
.certaint-list-two li:last-child{
margin-right: 0;
}
.answers-title{
text-align: center;
margin-bottom: 20px;
font-weight: bold;
}
.panel-certaint{
margin-bottom: 20px;
background-color: #FFF;
border: 1px solid #e4e4e4;;
box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
padding: 10px;
border-radius: 6px;
}
.certaint-text{
text-align: center;
padding: 10px 5px;
}
.certaintyVerticalLine {
float: left;
border-left : 1px solid black;
font-size: 0;
}
.certaintyQuizClearer {
clear : both;
font-size: 0;
height:0
}
.chart-legend{
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.chart-legend li{
display: inline-block;
padding-left: 10px;
padding-right: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
.square_color4{
color: #1e9c55;
}
.square_color3{
color: #b1e183;
}
.square_color2{
color: #f6ba2a;
}
.square_color1{
color: #f79b88;
}
.square_color0{
color: #ed4040;
}
.levelbar_1 {
background-color: #1e9c55;
border: 1px solid #1e9c55;
}
.levelbar_2 {
background-color: #b1e183;
border: 1px solid #b1e183;
}
.levelbar_3 {
background-color: #f6ba2a;
border: 1px solid #f6ba2a;
}
.levelbar_4 {
background-color: #f79b88;
border: 1px solid #f79b88;
}
.levelbar_5 {
background-color: #ed4040;
border: 1px solid #ed4040;
}
table.certaintyTable {
margin : auto;
border: 1px solid #7FC5FF;
}
table.certaintyTable th {
text-align: center;
border-bottom: 1px solid #7FC5FF;
background-color: #c9e0ff;
}
table.certaintyTable td {
padding : 10px;
}
table.certaintyTable td.borderRight {
border-right: 1px dotted #7FC5FF;
}
table.certaintyTable td.firstLine {
vertical-align: top;
text-align: center;
}
table.certaintyTable th.globalChart {
font-size : 18pt;
line-height : 120%;
padding : 20px;
}
table.certaintyTable td.globalChart {
font-weight : bold;
}
/* Exercise clock*/
.count_down {

287
main/exercise/MultipleAnswerTrueFalseDegreeCertainty.php
Unescape View File

@ -335,7 +335,7 @@ class MultipleAnswerTrueFalseDegreeCertainty extends Question
if ($studentDegreeChoicePosition == 3) {
$result = [
'color' => '#000000',
'background-color' => '#FFFFFF',
'background-color' => '#F6BA2A',
'status' => self::LEVEL_WHITE,
'label' => get_lang('DegreeOfCertaintyDeclaredIgnorance'),
'description' => get_lang('DegreeOfCertaintyDeclaredIgnoranceDescription'),
@ -346,7 +346,7 @@ class MultipleAnswerTrueFalseDegreeCertainty extends Question
if ($studentDegreeChoicePosition >= 6) {
$result = [
'color' => '#FFFFFF',
'background-color' => '#088A08',
'background-color' => '#1E9C55',
'status' => self::LEVEL_DARKGREEN,
'label' => get_lang('DegreeOfCertaintyVerySure'),
'description' => get_lang('DegreeOfCertaintyVerySureDescription'),
@ -354,7 +354,7 @@ class MultipleAnswerTrueFalseDegreeCertainty extends Question
} elseif ($studentDegreeChoicePosition >= 4 && $studentDegreeChoicePosition <= 5) {
$result = [
'color' => '#000000',
'background-color' => '#A9F5A9',
'background-color' => '#B1E183',
'status' => self::LEVEL_LIGHTGREEN,
'label' => get_lang('DegreeOfCertaintyPrettySure'),
'description' => get_lang('DegreeOfCertaintyPrettySureDescription'),
@ -364,7 +364,7 @@ class MultipleAnswerTrueFalseDegreeCertainty extends Question
if ($studentDegreeChoicePosition >= 6) {
$result = [
'color' => '#FFFFFF',
'background-color' => '#FE2E2E',
'background-color' => '#ED4040',
'status' => self::LEVEL_DARKRED,
'label' => get_lang('DegreeOfCertaintyVeryUnsure'),
'description' => get_lang('DegreeOfCertaintyVeryUnsureDescription'),
@ -372,7 +372,7 @@ class MultipleAnswerTrueFalseDegreeCertainty extends Question
} elseif ($studentDegreeChoicePosition >= 4 && $studentDegreeChoicePosition <= 5) {
$result = [
'color' => '#000000',
'background-color' => '#F6CECE',
'background-color' => '#F79B88',
'status' => self::LEVEL_LIGHTRED,
'label' => get_lang('DegreeOfCertaintyUnsure'),
'description' => get_lang('DegreeOfCertaintyUnsureDescription'),
@ -498,7 +498,7 @@ class MultipleAnswerTrueFalseDegreeCertainty extends Question
if ($category) {
$categoryQuestionName = $category->name;
}
list($noValue, $height) = self::displayDegreeChart(
list($noValue, $height) = self::displayDegreeChartChildren(
$scoreListForCategory,
300,
'',
@ -519,8 +519,21 @@ class MultipleAnswerTrueFalseDegreeCertainty extends Question
$boxWidth = $sizeRatio * 300 + 54;
}
$html = '<div style="width: '.$boxWidth.'px; margin : auto; padding-left : 15px;">';
$html .= '<h3 style="text-align: center; margin : 10px 0">'.$title.'</h3>';
$html = '<div class="row-chart">';
$html .= '<h4 class="chart-title">'.$title.'</h4>';
$legendTitle = [
'DegreeOfCertaintyVeryUnsure',
'DegreeOfCertaintyUnsure',
'DegreeOfCertaintyDeclaredIgnorance',
'DegreeOfCertaintyPrettySure',
'DegreeOfCertaintyVerySure',
];
$html .= '<ul class="chart-legend">';
foreach ($legendTitle as $i => $item){
$html .= '<li><i class="fa fa-square square_color'.$i.'" aria-hidden="true"></i> '.get_lang($item).'</li>';
}
$html .= '</ul>';
// get the html of items
$i = 0;
@ -538,8 +551,8 @@ class MultipleAnswerTrueFalseDegreeCertainty extends Question
$categoryName = $categoryQuestionName;
}
$html .= '<div style="float:left; margin-right: 10px;">';
$html .= self::displayDegreeChart(
$html .= '<div class="col-md-4">';
$html .= self::displayDegreeChartChildren(
$scoreListForCategory,
300,
$categoryName,
@ -551,15 +564,16 @@ class MultipleAnswerTrueFalseDegreeCertainty extends Question
);
$html .= '</div>';
if ($i == 1) {
$html .= '<div style="clear:both">&nbsp;</div>';
if ($i == 2) {
$html .= '<div style="clear:both; height: 10px;">&nbsp;</div>';
$i = 0;
} else {
$i++;
}
}
$html .= '</div>';
return $html.'<div style="clear:both">&nbsp;</div></div>';
return $html.'<div style="clear:both; height: 10px;" >&nbsp;</div>';
}
/**
@ -587,7 +601,8 @@ class MultipleAnswerTrueFalseDegreeCertainty extends Question
$returnHeight = false,
$groupCategoriesByBracket = false,
$numberOfQuestions = 0
) {
)
{
$topAndBottomMargin = 10;
$colorList = [
self::LEVEL_DARKRED,
@ -613,96 +628,166 @@ class MultipleAnswerTrueFalseDegreeCertainty extends Question
}
// draw chart
$html = '<style type="text/css">
.certaintyQuizBox {
border : 1px solid black;
margin : auto;
}
$html = '';
.certaintyQuizColumn {
float : left;
}
if ($groupCategoriesByBracket) {
$title = api_preg_replace("/[^]]*$/", '', $title);
$title = ucfirst(api_preg_replace("/[\[\]]/", '', $title));
}
/* text at the top of the column */
.certaintyQuizDivMiddle {
height : 20px;
margin : 0;
padding : 0;
text-align: center
}
$titleDisplay = (strpos($title, "ensemble") > 0) ?
$title."<br/>($totalAttemptNumber questions)" :
$title;
$textSize = (
strpos($title, 'ensemble') > 0 ||
strpos($title, 'votre dernier résultat à ce test') > 0
) ? 100 : 80;
.certaintyQuizDivBottom {
border : 1px solid black;
}
.certaintyVerticalLine {
float: left;
border-left : 1px solid black;
font-size: 0;
}
$html .= '<div class="row-chart">';
$html .= '<h4 class="chart-title">'.$titleDisplay.'</h4>';
.certaintyQuizClearer {
clear : both;
font-size: 0;
height:0
}
.certaintyQuizLevel_'.self::LEVEL_DARKGREEN.' {
background-color: #088A08;
}
$nbResponsesInc = 0;
if (isset($scoreList[4])) {
$nbResponsesInc += (int) $scoreList[4];
}
if (isset($scoreList[5])) {
$nbResponsesInc += (int) $scoreList[5];
}
.certaintyQuizLevel_'.self::LEVEL_LIGHTGREEN.' {
background-color: #A9F5A9;
}
$nbResponsesIng = isset($scoreList[3]) ? $scoreList[3] : 0;
.certaintyQuizLevel_'.self::LEVEL_WHITE.' {
background-color: #FFFFFF;
width:88%
}
$nbResponsesCor = 0;
if (isset($scoreList[1])) {
$nbResponsesCor += (int) $scoreList[1];
}
if (isset($scoreList[2])) {
$nbResponsesCor += (int) $scoreList[2];
}
.certaintyQuizLevel_'.self::LEVEL_LIGHTRED.' {
background-color: #F6CECE;
}
$IncorrectAnswers = sprintf(get_lang('IncorrectAnswersX'), $nbResponsesInc);
$IgnoranceAnswers = sprintf(get_lang('IgnoranceAnswersX'), $nbResponsesIng);
$CorrectAnswers = sprintf(get_lang('CorrectAnswersX'), $nbResponsesCor);
.certaintyQuizLevel_'.self::LEVEL_DARKRED.' {
background-color: #FE2E2E;
}
table.certaintyTable {
margin : auto;
border: 1px solid #999A9B;
}
table.certaintyTable th {
text-align: center;
border-bottom: 1px solid #999A9B;
background-color: #cdd0d4;
padding : 10px;
}
table.certaintyTable td {
padding : 10px;
}
table.certaintyTable td.borderRight {
border-right: 1px dotted #000000;
}
table.certaintyTable td.firstLine {
vertical-align: top;
text-align: center;
}
table.certaintyTable th.globalChart {
font-size : 18pt;
line-height : 120%;
padding : 20px;
}
table.certaintyTable td.globalChart {
font-weight : bold;
}
</style>';
$html .= '<div class="chart-grid">';
$explainHistoList = null;
if ($displayExplanationText) {
// Display of histogram text
$explainHistoList = [
'DegreeOfCertaintyVeryUnsure',
'DegreeOfCertaintyUnsure',
'DegreeOfCertaintyDeclaredIgnorance',
'DegreeOfCertaintyPrettySure',
'DegreeOfCertaintyVerySure',
];
}
foreach ($colorList as $i => $color) {
if (array_key_exists($color, $scoreList)) {
$scoreOnBottom = $scoreList[$color]; // height of the colored area on the bottom
} else {
$scoreOnBottom = 0;
}
$sizeBar = ($scoreOnBottom * $sizeRatio * 2).'px;';
if ($i == 0 ) {
$html .= '<div class="item">';
$html .= '<div class="panel-certaint" style="min-height:'.$verticalLineHeight.'px; position: relative;">';
$html .= '<div class="answers-title">'.$IncorrectAnswers.'</div>';
$html .= '<ul class="certaint-list-two">';
} else if($i == 3){
$html .= '<div class="item">';
$html .= '<div class="panel-certaint" style="height:'.$verticalLineHeight.'px; position: relative;">';
$html .= '<div class="answers-title">'.$CorrectAnswers.'</div>';
$html .= '<ul class="certaint-list-two">';
} else if($i==2){
$html .= '<div class="item">';
$html .= '<div class="panel-certaint" style="height:'.$verticalLineHeight.'px; position: relative;">';
$html .= '<div class="answers-title">'.$IgnoranceAnswers.'</div>';
$html .= '<ul class="certaint-list">';
}
$html .= '<li>';
$html .= '<div class="certaint-score">';
$html .= $scoreOnBottom;
$html .= '</div>';
$html .= '<div class="levelbar_'.$color.'" style="height:'.$sizeBar.'">&nbsp;</div>';
$html .= '<div class="certaint-text">'.get_lang($explainHistoList[$i]).'</div>';
$html .= '</li>';
if ($i == 1 || $i == 2 || $i == 4) {
$html .= '</ul>';
$html .= '</div>';
$html .= '</div>';
}
}
$html .= '</div>';
$html .= '</div>';
if ($returnHeight) {
return [$html, $verticalLineHeight];
} else {
return $html;
}
}
/**
* Return HTML code for the $scoreList of MultipleAnswerTrueFalseDegreeCertainty questions.
*
* @param $scoreList
* @param $widthTable
* @param string $title
* @param int $sizeRatio
* @param int $minHeight
* @param bool $displayExplanationText
* @param bool $returnHeight
* @param bool $groupCategoriesByBracket
* @param int $numberOfQuestions
*
* @return array|string
*/
public static function displayDegreeChartChildren(
$scoreList,
$widthTable,
$title = '',
$sizeRatio = 1,
$minHeight = 0,
$displayExplanationText = true,
$returnHeight = false,
$groupCategoriesByBracket = false,
$numberOfQuestions = 0
)
{
$topAndBottomMargin = 10;
$colorList = [
self::LEVEL_DARKRED,
self::LEVEL_LIGHTRED,
self::LEVEL_WHITE,
self::LEVEL_LIGHTGREEN,
self::LEVEL_DARKGREEN,
];
// get total attempt number
$highterColorHeight = 0;
foreach ($scoreList as $color => $number) {
if ($number > $highterColorHeight) {
$highterColorHeight = $number;
}
}
$totalAttemptNumber = $numberOfQuestions;
$verticalLineHeight = $highterColorHeight * $sizeRatio * 2 + 122 + $topAndBottomMargin * 2;
if ($verticalLineHeight < $minHeight) {
$minHeightCorrection = $minHeight - $verticalLineHeight;
$verticalLineHeight += $minHeightCorrection;
}
// draw chart
$html = '';
if ($groupCategoriesByBracket) {
$title = api_preg_replace("/[^]]*$/", '', $title);
@ -723,7 +808,7 @@ class MultipleAnswerTrueFalseDegreeCertainty extends Question
$classGlobalChart = 'globalChart';
}
$html .= '<table class="certaintyTable" style="height :'.$verticalLineHeight.'px; width: '.$widthTable.'px;">';
$html .= '<table class="certaintyTable" style="height :'.$verticalLineHeight.'px; margin-bottom: 10px;" >';
$html .= '<tr><th colspan="5" class="'
.$classGlobalChart
.'">'
@ -754,16 +839,16 @@ class MultipleAnswerTrueFalseDegreeCertainty extends Question
$html .= '<tr>
<td class="firstLine borderRight '.$classGlobalChart.'"
colspan="2"
style="width:'.($colWidth * 2).'px; font-size:'.$textSize.'%;">'.
style="width:'.($colWidth * 2).'px; line-height: 15px; font-size:'.$textSize.'%;">'.
sprintf(get_lang('IncorrectAnswersX'), $nbResponsesInc).'
</td>
<td class="firstLine borderRight '.$classGlobalChart.'"
style="width:'.$colWidth.'px; font-size :'.$textSize.'%;">'.
style="width:'.$colWidth.'px; line-height: 15px; font-size :'.$textSize.'%;">'.
sprintf(get_lang('IgnoranceAnswersX'), $nbResponsesIng).'
</td>
<td class="firstLine '.$classGlobalChart.'"
colspan="2"
style="width:'.($colWidth * 2).'px; font-size:'.$textSize.'%;">'.
style="width:'.($colWidth * 2).'px; line-height: 15px; font-size:'.$textSize.'%;">'.
sprintf(get_lang('CorrectAnswersX'), $nbResponsesCor).'
</td>
</tr>';
@ -779,7 +864,7 @@ class MultipleAnswerTrueFalseDegreeCertainty extends Question
if ($i == 1 || $i == 2) {
$html .= '<td width="'
.$colWidth
.'px" style="border-right: 1px dotted #000000; vertical-align: bottom;font-size: '
.'px" style="border-right: 1px dotted #7FC5FF; vertical-align: bottom;font-size: '
.$textSize
.'%;">'
;
@ -791,9 +876,9 @@ class MultipleAnswerTrueFalseDegreeCertainty extends Question
.'%;">'
;
}
$html .= '<div class="certaintyQuizDivMiddle">'
$html .= '<div class="certaint-score">'
.$scoreOnBottom
.'</div><div class="certaintyQuizDivBottom certaintyQuizLevel_'
.'</div><div class="levelbar_'
.$color
.'" style="height: '
.$sizeOnBottom

2
main/exercise/TestCategory.php
Unescape View File

@ -801,7 +801,7 @@ class TestCategory
}
$category_name_list = self::getListOfCategoriesNameForTest($exerciseId);
$table = new HTML_Table(['class' => 'data_table']);
$table = new HTML_Table(['class' => 'table table-bordered']);
$table->setHeaderContents(0, 0, get_lang('Categories'));
$table->setHeaderContents(0, 1, get_lang('AbsoluteScore'));
$table->setHeaderContents(0, 2, get_lang('RelativeScore'));

6
main/inc/lib/exercise_show_functions.lib.php
Unescape View File

@ -549,7 +549,7 @@ class ExerciseShowFunctions
echo '-';
}
echo '</td><td width="25%">';
echo '</td><td width="20%">';
echo $answer;
echo '</td><td width="5%" style="text-align:center;">';
echo $newOptions[$studentChoiceDegree]['name'];
@ -562,9 +562,9 @@ class ExerciseShowFunctions
);
echo '
<td width="10%">
<td width="15%">
<div style="text-align:center;color: '.$degreeInfo['color'].';
border:1px #D6D4D4 solid;background-color: '.$degreeInfo['background-color'].';
background-color: '.$degreeInfo['background-color'].';
line-height:30px;height:30px;width: 100%;margin:auto;"
title="'.$degreeInfo['description'].'">'.
nl2br($degreeInfo['label']).

Write Preview
Loading…
Cancel
Save