[Redizajn 1KA v2] - Testiranje --> Diagnostika - v1

Middle section: grafa za dolžino in kompleksnost ankete
This commit is contained in:
tejagerjovic 2022-07-19 02:27:04 +02:00
parent 580e768b1c
commit 85e9e715e5
4 changed files with 273 additions and 8 deletions

View File

@ -197,28 +197,42 @@ class SurveyDiagnostics
if ($total < 120) { # 2min
$time = $lang['srv_diagnostic_time_1'];
$time_chart = 20;
} else if ($total < 300) { # 5min
$time = $lang['srv_diagnostic_time_2'];
$time_chart = 40;
} else if ($total < 900) { # 15 min
$time = $lang['srv_diagnostic_time_3'];
$time_chart = 60;
} else if ($total < 1800) { # 30 min
$time = $lang['srv_diagnostic_time_4'];
$time_chart = 80;
} else { #> 30 min
$time = $lang['srv_diagnostic_time_5'];
$time_chart = 100;
}
$excess = 100 - $time_chart;
$display_length = "'[".$time_chart.",".$excess."]'"; //array za chart
# Kompleksnost
if ((int)($this->cnt_blocks + $this->cnt_conditions) == 0) {
$kompleksnost = $lang['srv_diagnostic_complexity_1'];
$complex_chart = 20;
} else if ((int)($this->cnt_blocks + $this->cnt_conditions) == 1) {
$kompleksnost = $lang['srv_diagnostic_complexity_2'];
$complex_chart = 40;
} else if ((int)($this->cnt_blocks + $this->cnt_conditions) < 10) {
$kompleksnost = $lang['srv_diagnostic_complexity_3'];
$complex_chart = 60;
} else if ((int)($this->cnt_blocks + $this->cnt_conditions) < 50) {
$kompleksnost = $lang['srv_diagnostic_complexity_4'];
$complex_chart = 80;
} else {
$kompleksnost = $lang['srv_diagnostic_complexity_5'];
$complex_chart = 100;
}
$excess = 100 - $complex_chart;
$display_complex = "'[".$complex_chart.",".$excess."]'"; //array za chart
echo '<h2>'.$lang['srv_testiranje_diagnostika'].'</h2>';
@ -453,10 +467,77 @@ class SurveyDiagnostics
echo '</table>';
// LASTNOSTI ANKETE
echo '<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>'; //Chart.js source
echo '<h2>'.$lang['srv_testiranje_diagnostika_lastnosti'].'</h2>';
echo '<div class="lastnosti_wrapper">';
echo '<div class="lastnosti_left">';
echo '</div>'; #lastnosti_left
echo '<div class="lastnosti_middle">';
// Dolžina ankete
if($lang['id'] == '1')
$link_time = 'href="https://www.1ka.si/d/sl/spletne-ankete/osnovna-priporocila/kako-dolga-naj-bo-moja-anketa?from1ka=1" target="_blank"';
else
$link_time = 'href="https://www.1ka.si/d/en/web-surveys/basic-recommendations/how-long-should-my-survey-be?from1ka=1" target="_blank"';
echo '<div class="box">';
echo '<div class="title">'.$lang['srv_diagnostic_1_element_5'].'</div>';
echo '<div class="diagnostic_graph">';
echo '<div class="circle">';
echo '<canvas id="survey_length"></canvas>';
echo '</div>';
echo '<script type="text/javascript"> diagnosticsChart(\'survey_length\','.$display_length.'); </script>';
echo '<div class="other_text">';
echo '<p>'.$time.'</p>';
echo '<a '.$link_time.'>'.$lang['srv_diagnostic_time_extra'].'</a>';
echo '</div>';
echo '</div>';
echo '</div>'; #box
// Kompleksnost ankete
if($lang['id'] == '1')
$link_complex = 'href="https://www.1ka.si/d/sl/spletne-ankete/osnovna-priporocila/kaj-pomeni-kompleksnost-ankete?from1ka=1" target="_blank"';
else
$link_complex = 'href="https://www.1ka.si/d/en/web-surveys/basic-recommendations/what-does-survey-complexity-mean?from1ka=1" target="_blank"';
echo '<div class="box">';
echo '<div class="title">'.$lang['srv_diagnostic_1_element_4'].'</div>';
echo '<div class="diagnostic_graph">';
echo '<div class="circle">';
echo '<canvas id="survey_complex"></canvas>';
echo '</div>';
echo '<script type="text/javascript"> diagnosticsChart(\'survey_complex\','.$display_complex.'); </script>';
echo '<div class="other_text">';
echo '<p>'.$kompleksnost.'</p>';
echo '<a '.$link_complex.'>'.$lang['srv_diagnostic_complexity_extra'].'</a>';
echo '</div>';
echo '</div>';
echo '</div>'; #box
echo '</div>'; #lastnosti_middle
echo '<div class="lastnosti_right">';
echo '</div>'; #lastnosti_right
echo '</div>'; #lastnosti_wrapper
/////////////////////////////////////////////////////////////////////// Lastnosti staro
echo '<div class="lastnosti_wrapper">';
echo '<div class="lastnosti_left">';
echo '<table class="srv_diagnostic_results">';
echo '<tr>';

View File

@ -5639,3 +5639,32 @@ function oneClickArchive(){
$('#general_popup').html('').fadeIn('slow');
$("#general_popup").load('ajax.php?a=oneClickArchive', {anketa: srv_meta_anketa_id});
}
function diagnosticsChart(place,display) {
const data = {
datasets: [{
data: display,
backgroundColor: [
'rgb(229,229,229)',
'rgb(30, 136, 229)',
],
borderWidth: 0, //spacing between slices
}]
};
const config = {
type: 'doughnut',
data: data,
options: {
events: [], //no hover labels,animations,...
cutout: 32, //slice width
}
};
const myChart = new Chart(
document.getElementById(place),
config
);
}

View File

@ -23909,12 +23909,61 @@ div#srv_diagnostic table td div.status_wrapper div.status a {
div#srv_diagnostic div.lastnosti_wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
align-items: space-between;
gap: 32px;
}
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_left,
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_middle,
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_right {
width: 50%;
width: 33%;
display: flex;
flex-direction: column;
gap: 16px;
}
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_left .box,
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_middle .box,
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_right .box {
border: 1px solid #E5E5E5;
border-radius: 2px;
padding: 16px;
display: flex;
flex-direction: column;
}
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_left .box .title,
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_middle .box .title,
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_right .box .title {
text-transform: uppercase;
font-weight: 600;
margin-bottom: 16px;
}
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_left .box .diagnostic_graph,
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_middle .box .diagnostic_graph,
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_right .box .diagnostic_graph {
display: flex;
flex-direction: row;
margin-top: -8px;
}
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_left .box .diagnostic_graph .circle,
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_middle .box .diagnostic_graph .circle,
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_right .box .diagnostic_graph .circle {
height: 100px;
width: 100px;
margin-right: 16px;
}
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_left .box .diagnostic_graph .other_text,
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_middle .box .diagnostic_graph .other_text,
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_right .box .diagnostic_graph .other_text {
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
}
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_left .box .diagnostic_graph .other_text a,
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_middle .box .diagnostic_graph .other_text a,
div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_right .box .diagnostic_graph .other_text a {
text-decoration: none;
font-size: 14px !important;
white-space: nowrap;
}
div#srv_diagnostic div.input_box {
display: flex;
@ -29046,15 +29095,15 @@ iframe#ifmcontentstoprint {
}
.rsdl_bck1 {
background-color: rgb(250, 226, 226) !important;
background-color: #fae2e2 !important;
}
.rsdl_bck2 {
background-color: rgb(255, 157, 157) !important;
background-color: #ff9d9d !important;
}
.rsdl_bck3 {
background-color: rgb(248, 66, 66) !important;
background-color: #f84242 !important;
}
.rsdl_bck4 {
@ -32483,19 +32532,24 @@ table.dataTable td:not(:first-of-type), table.dataTable th:not(:first-of-type) {
#quick_comments_link.newCss {
display: none;
}
#firstNavigation ol.right-side {
display: none;
}
div.status_advanced {
flex-direction: column;
}
div.status_advanced_box {
width: 100%;
box-sizing: border-box;
}
a.status_advanced_link {
width: 95%;
}
.content_div_normalmode {
overflow-x: auto;
}
@ -32563,6 +32617,7 @@ body #main_holder #main .wide {
width: 100%;
margin: 0;
}
fieldset {
width: 100% !important;
box-sizing: border-box !important;
@ -32592,36 +32647,44 @@ fieldset textarea {
fieldset .setting {
height: auto !important;
}
.setting_horizontal_wrapper {
flex-direction: column !important;
}
#vnosi_paginacija div select {
display: inline-block;
width: fit-content;
margin: 0 5px;
text-align: center;
}
div.breadcrumbs {
display: block;
padding: 15px;
color: #1e88e5;
font-weight: 600;
}
button.small, submit.small {
min-width: auto;
padding: 5px 16px;
}
button.medium, submit.medium {
min-width: auto;
padding: 10px 24px;
}
button.large, submit.large {
min-width: auto;
padding: 12px 32px;
}
.top_note {
padding: 8px 16px;
}
header {
/* Mobile meni */
/* Mobile meni - NASTAVITVE V UREJANJU ANKETE*/
@ -32877,6 +32940,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
header .mobile_settings .mobile_settings_content a .setting_text {
width: auto;
}
footer#srv_footer {
display: flex;
flex-direction: column;
@ -32898,6 +32962,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
padding: 0;
border: 0;
}
/* Popup za vprasajcke */
.qtip {
position: fixed !important;
@ -32908,6 +32973,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
left: 10% !important;
box-shadow: 0 0 15px 15px rgba(0, 0, 0, 0.34) !important;
}
.divPopUp {
width: calc(100% - 32px) !important;
max-width: calc(100% - 32px) !important;
@ -32918,10 +32984,12 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
width: calc(100% - 32px) !important;
max-width: calc(100% - 32px) !important;
}
/* Vse povezano s paketi in placili */
.dt-buttons {
display: none;
}
#main #moje_ankete_edit #anketa_edit {
padding: 0 !important;
}
@ -32999,6 +33067,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
#main #moje_ankete_edit fieldset div.setting {
margin-bottom: 10px;
}
#new_anketa_div {
display: flex;
flex-direction: column;
@ -33082,6 +33151,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
border: 1px solid #c8e3f8 !important;
border-radius: 1px;
}
.dashboard_top_settings {
flex-direction: column;
}
@ -33094,16 +33164,19 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
margin-left: 0;
margin-right: 16px;
}
.dashboard_boxes {
flex-direction: column;
}
.dashboard_boxes .dashboard_box {
margin: 0 0 32px 0;
}
.locked .add-variable-mobile,
.spremenljivka_content .add-variable {
display: none !important;
}
#branching {
width: 100%;
margin: 0;
@ -33208,9 +33281,11 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
margin: 0;
padding: 0 12px;
}
.toolbox_holder {
display: none;
}
.mobile_add_question {
display: block;
position: fixed;
@ -33230,6 +33305,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
line-height: 15px;
font-weight: 600;
}
.mobile_add_question_popup {
z-index: 9999;
position: fixed;
@ -33283,6 +33359,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
font-size: 14px;
font-weight: 500;
}
#vprasanje_float_editing .vprasanje_edit_holder {
position: fixed;
z-index: 99999;
@ -33335,6 +33412,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
margin-left: 0 !important;
text-align: center;
}
#main #anketa #globalSetingsList {
max-width: 100% !important;
width: 100% !important;
@ -33347,6 +33425,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
#main #anketa #globalSetingsList fieldset span.charalimit#anketa_note_chars {
width: 100%;
}
/* NASTAVITVE in ARHIVI */
/* OBLIKA */
#main #anketa #anketa_edit.page_tema #div_theme_group_holder {
@ -33362,15 +33441,18 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
width: 100%;
height: auto;
}
#theme-editor {
width: 100% !important;
float: none !important;
}
#theme-preview {
width: 100% !important;
float: none !important;
margin-top: 80px !important;
}
/* ARHIVI */
#main #anketa #anketa_edit.page_arhivi {
flex-direction: column-reverse;
@ -33388,6 +33470,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
#main #anketa #anketa_edit.page_arhivi #div_archive_content fieldset input {
width: 100% !important;
}
div.page_tema .theme_list {
flex-wrap: wrap;
}
@ -33414,6 +33497,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
div.page_tema div#theme_grid_holder div.div_theme_group div.theme_label .theme_label_options .button {
margin-right: 8px;
}
.page_theme-editor #theme-preview {
display: none;
}
@ -33421,6 +33505,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
width: 100% !important;
flex-wrap: wrap;
}
#srv_diagnostic br {
display: none;
}
@ -33441,6 +33526,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
#srv_diagnostic #srv_diagnostic_results_right table td + td {
width: auto !important;
}
.subpage_testnipodatki {
line-height: 20px;
}
@ -33454,6 +33540,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
.subpage_testnipodatki form label input {
vertical-align: bottom;
}
.lastnosti_wrapper {
flex-direction: column !important;
}
@ -33461,6 +33548,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
.lastnosti_wrapper .lastnosti_right {
width: 100% !important;
}
.page_vabila #vabila .button_holder {
flex-direction: column;
align-items: flex-start;
@ -33485,6 +33573,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
.page_vabila #vabila .more_block {
width: 100%;
}
.page_invitations #inv_top_navi {
flex-direction: column;
align-items: flex-start;
@ -33552,6 +33641,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
.page_invitations .button_holder button {
margin-bottom: 8px;
}
#vabila > table,
table.invitations_settings,
#inv_msg_preview table,
@ -33635,6 +33725,7 @@ table.invitations_settings p label input[type=password],
width: 100% !important;
box-sizing: border-box;
}
#surveyInvitationSetting,
#surveyInvitationSettingServer {
min-width: 100% !important;
@ -33642,6 +33733,7 @@ table.invitations_settings p label input[type=password],
margin: 10px 0 !important;
box-sizing: border-box !important;
}
#inv_top_navi {
display: flex;
flex-direction: column;
@ -33680,6 +33772,7 @@ table.invitations_settings p label input[type=password],
#inv_top_navi > #inv_step_nav.yellow .inv_step_space {
display: none;
}
#inv_recipients_profiles_holder,
#inv_import_list_container,
#inv_messages_profiles_holder,
@ -33700,6 +33793,7 @@ table.invitations_settings p label input[type=password],
#inv_select_mail_preview textarea {
width: 100%;
}
#inv_msg_preview table th {
height: auto !important;
width: 100% !important;
@ -33711,6 +33805,7 @@ table.invitations_settings p label input[type=password],
width: 100%;
box-sizing: border-box;
}
.addthis_toolbox {
line-height: 24px;
}
@ -33725,9 +33820,11 @@ table.invitations_settings p label input[type=password],
.addthis_toolbox .addthis_separator {
font-size: 16px;
}
#inv_field_container ul li {
width: 45%;
}
/* grafika ko ni podatkov */
div.no_data_alert img {
width: 100%;
@ -33739,6 +33836,7 @@ table.invitations_settings p label input[type=password],
flex-direction: column;
align-items: center;
}
.page_data .data_table_top_holder {
flex-direction: column;
align-items: flex-start;
@ -33809,9 +33907,11 @@ table.invitations_settings p label input[type=password],
width: 100%;
margin-bottom: 16px;
}
body.data_fullscreen #analiza_data {
top: 68px;
}
.subpage_append .anketa_edit_main,
.subpage_merge .anketa_edit_main,
.subpage_calculation .anketa_edit_main,
@ -33852,6 +33952,7 @@ table.invitations_settings p label input[type=password],
clear: both;
margin: 40px 0 0 0 !important;
}
.subpage_quick_edit #quick_edit_top_line {
flex-direction: column-reverse;
}
@ -33871,6 +33972,7 @@ table.invitations_settings p label input[type=password],
.subpage_quick_edit .quick_edit_container .quick_edit_bottom_line {
justify-content: center;
}
.analysis_bottom_settings {
flex-wrap: wrap;
}
@ -33880,13 +33982,16 @@ table.invitations_settings p label input[type=password],
margin: 0 0 16px 0 !important;
border: 0;
}
.div_analiza_icons,
.div_analiza_scale {
opacity: 1 !important;
}
.analysis_icons_holder {
display: none;
}
.chart_holder {
width: 100%;
box-sizing: border-box;
@ -33909,6 +34014,7 @@ table.invitations_settings p label input[type=password],
display: block;
clear: both;
}
table.analysis_reports {
border-spacing: 0px;
}
@ -33925,12 +34031,14 @@ table.analysis_reports > tbody > tr > td {
table.analysis_reports fieldset {
margin-bottom: 0 !important;
}
.reports_holder {
flex-direction: column;
}
.reports_holder fieldset {
width: 100%;
}
.noSurvey_sequence {
padding: 0;
}
@ -33952,11 +34060,13 @@ table.analysis_reports > tbody > tr > td {
.noSurvey_sequence .buttons_holder a .button {
margin: 10px 30px;
}
#table-horizontal-scroll-wrapper1-userchanges {
display: table;
table-layout: fixed;
width: 100%;
}
#table-horizontal-scroll-wrapper2-userchanges {
display: table-cell;
overflow-x: auto;
@ -33967,6 +34077,7 @@ table.analysis_reports > tbody > tr > td {
border-collapse: collapse;
white-space: nowrap;
}
.page_arhivi .anketa_edit_left,
.page_tracking .anketa_edit_left,
.subpage_anal_arch .anketa_edit_left,

View File

@ -62,12 +62,56 @@ div#srv_diagnostic {
div.lastnosti_wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
align-items: space-between;
gap: 32px;
div.lastnosti_left,
div.lastnosti_middle,
div.lastnosti_right {
width: 50%;
width: 33%;
display: flex;
flex-direction: column;
gap: 16px;
.box {
border: 1px solid $gray;
border-radius: 2px;
padding: 16px;
display: flex;
flex-direction: column;
.title {
text-transform: uppercase;
font-weight: $semi-bold;
margin-bottom: 16px;
}
.diagnostic_graph {
display: flex;
flex-direction: row;
margin-top: -8px;
.circle {
height: 100px;
width: 100px;
margin-right: 16px;
}
.other_text {
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
a {
text-decoration: none;
font-size: 14px !important;
white-space: nowrap;
}
}
}
}
}
}