Skip to content

Commit

Permalink
Merge pull request #190 from ELEVATE-Project/enhancement/matrix_chart
Browse files Browse the repository at this point in the history 
matrix report changes
  • Loading branch information
@VISHNUDAS-tunerlabs
VISHNUDAS-tunerlabs authored Feb 11, 2025
2 parents 58bf7da + 622ba91 commit d525a09
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 65 deletions.
2 changes: 2 additions & 0 deletions helper/chart_data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -411,6 +411,8 @@ async function createNewFormattedAnswer(questionInstance, questionRecordSingleEl
if(chartType == 'instance' && questionInstance.responseType == 'multiselect' || questionInstance.responseType == 'matrix'){
answer = Array.isArray(questionInstance.value) ? questionInstance.value : [questionInstance.value];
}

answer = answer.filter((ans) => ans != '');

return {
qid: questionInstance.qid,
Expand Down
51 changes: 50 additions & 1 deletion helper/pdfGeneration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -491,7 +491,8 @@ exports.instanceObservationPdfGeneration = async function instanceObservationPdf

var obj = {
orderData: arrOfData,
matrixRes: matrixData
matrixRes: matrixData,
matrixFormatedData:groupAnswersByQuestion(arrOfData.filter(obj => obj.responseType === "matrix"))
};
ejs.renderFile(__dirname + '/../views/instanceObservationTemplate.ejs', {
data: obj
Expand Down Expand Up @@ -1348,6 +1349,54 @@ const getAssessmentChartData = async function (assessmentData,submissionId="") {
return assessmentData;
};

/**
* Groups answers by question and organizes them by instance identifier.
* @method
* @name groupAnswersByQuestion
* @param {Array} data - Array of objects containing questions and answers.
* @returns {Array} - Array of grouped answers, each containing question details and categorized answers.
*/
function groupAnswersByQuestion(data) {

let groupedAnswers = [];

for(let i=0;i<data.length;i++){
let answerInstance = {};

answerInstance = {
question: data[i].question,
responseType: data[i].responseType,
qid: data[i].qid,
order: data[i].order,
answers: {}
}

data[i].answers.forEach(item => {
const instanceIdentifier = item.instanceIdentifier;

for (const key in item) {
if (key !== "instanceIdentifier") {
const questionData = item[key];
const qid = questionData.qid;

if (!answerInstance['answers'][qid]) {
answerInstance['answers'][qid] = {
question: questionData.question, // Add the question text
responseType: questionData.responseType, // and response Type
answers: {} // Initialize the answers object
};
}

answerInstance['answers'][qid].answers[instanceIdentifier] = questionData.answers;
}
}
});

groupedAnswers.push(answerInstance);
}

return groupedAnswers;
}
/**
* Covert datasets Value to percentage for observationwith Rubrics horizontal chart.
* @method
Expand Down
114 changes: 50 additions & 64 deletions views/instanceObservationTemplate.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

<body>
<% var orderData= data.orderData; %>
<% var matrixFormatedData= data.matrixFormatedData; %>
<% for (var r=0;r < orderData.length; r++){ %>
<% if(orderData[r].responseType == 'text' || orderData[r].responseType == 'date' || orderData[r].responseType == 'number' || orderData[r].responseType == 'slider' || orderData[r].responseType == 'radio' || orderData[r].responseType == 'multiselect'){ %>
Expand All @@ -16,7 +17,8 @@
<% for(var j=0; j < orderData[r].answers.length; j++) { %>
<div class="row" style="padding: 10px;padding-left:10px">
<div class="col-sm-12" style="font-size: 18px;">
<%= orderData[r].answers[j] %>
<% let currentAnswer = orderData[r].answers[j] || 'No response is available'; %>
<%= currentAnswer %>
</div>
</div>
<% } %>
Expand All @@ -25,73 +27,57 @@
<% } else if(orderData[r].responseType == 'matrix'){ %>
<% for(var i=0; i< data.matrixRes.length; i++){ %>
<% for(var i=0; i< matrixFormatedData.length; i++){ %>
<% if(data.matrixRes[i].order == orderData[r].order){ %>
<div class="container" style="padding:20px;margin:10px">
<div style="border: solid 1px rgb(182, 175, 175)">
<h3 style="background-color: #eee;padding:10px; padding-left: 10px;font-size: 21px"><%= orderData[r].question %>
</h3>
<% var matrixResponse = data.matrixRes[i].data %>
<% var instanceCounter = 0 %>
<% for(var k=0; k < matrixResponse.length; k++) { %>
<% if (instanceCounter !== matrixResponse[k].instanceNumber) { %>
<h3 style="padding-left: 10px;">Instance Number: <%= matrixResponse[k].instanceNumber %></h3>
<% instanceCounter = matrixResponse[k].instanceNumber; %>
<% } %>
<!-- <h2>Attempt #<%= k+1 %></h2> -->
<% if(matrixResponse[k].responseType == 'text' || matrixResponse[k].responseType == 'date' || matrixResponse[k].responseType == 'number' || matrixResponse[k].responseType == 'slider'){ %>
<div class="container" style="padding:20px;margin:20px">
<div style="border: solid 1px rgb(182, 175, 175);max-width:800px;">
<% if (matrixFormatedData[i].order == orderData[r].order) { %>
<div class="container" style="padding:20px;margin:10px">
<div style="border: solid 1px rgb(182, 175, 175)">
<h3 style="background-color: #eee;padding:10px; padding-left: 10px;font-size: 21px">
<%= matrixResponse[k].question %></h3>
<% for(var m=0; m< matrixResponse[k].answers.length; m++) { %>
<div class="row" style="padding: 10px;padding-left:10px">
<div class="col-sm-12" style="font-size: 18px;">
<%= matrixResponse[k].answers[m] %>
</div>
</div>
<% } %>
</div>
</div>
<% } else if(matrixResponse[k].responseType == 'radio' || matrixResponse[k].responseType == 'multiselect' ){ %>
<div class="container" style="padding:20px;margin:20px;">
<div style="border: solid 1px rgb(182, 175, 175);max-width:800px;">
<h3 style="background-color: #eee;padding:10px; padding-left: 10px;font-size: 21px"><%= matrixResponse[k].question %></h3>
<!-- <div>
</div> -->
<!-- <h5 style="padding-left:10px">Responses</h5> -->
<% for(var j=0; j < matrixResponse[k].answers.length; j++) { %>
<div class="row" style="padding: 10px;padding-left:10px">
<div class="col-sm-12" style="font-size: 18px;">
<p><%= matrixResponse[k].answers[j] %></p>
</div>
</div>
<%= orderData[r].question %>
</h3>
<% var matrixResponse = matrixFormatedData[i].answers; %>
<% var instanceCounter = 0; %>
<% for (var key in matrixResponse) { %>
<% var question = matrixResponse[key].question; %>
<% var responseType = matrixResponse[key].responseType; %>
<% var answers = matrixResponse[key].answers; %>
<h3 style="padding-left: 20px;font-size: 21px""><%= question %></h3>
<% for (var answerKey in answers) { %>
<div class="row" style="padding: 10px;padding-left:30px">
<div style="border: 1px solid #ddd; border-radius: 8px; padding: 10px 15px;gap: 10px; width: 90%; margin:20px auto; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); font-family: Arial, sans-serif;margin-left: 15px;">
<div style="font-weight: bold;width: 100%; padding: 5px; border-bottom: 1px solid #ddd;color:#832215"><%= answerKey %> </div>
<div style="display: flex; align-items: center; gap: 5px;padding-top: 5px;">
<%
let answer = '<i style="margin-right:5px">➝</i>'+ answers[answerKey][0]
if(answers[answerKey].length > 1 ){
let answerArr = []
answers[answerKey] = answers[answerKey].filter((item) => item !== '')
for(let i=0; i<answers[answerKey].length; i++){
answerArr.push(`<p><i style="margin-right:5px" >➝</i>${answers[answerKey][i]}</p>`)
}
let finalAnswer = answerArr.join('');
answer = finalAnswer
}
%>
<span style="font-weight: 500;padding:5px"><%- answer %></span>
</div>
</div>
</div>
<% } %>
<% } %>
</div>
</div>
<% } %>
<% } %>
</div>
</div>
<% } %>
</div>
</div>
<% } %>
Expand Down

0 comments on commit d525a09

Please sign in to comment.