Skip to content

Add: Interval to the PI Review Page to Wait for Question Data #583

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+75 −66
Open

Add: Interval to the PI Review Page to Wait for Question Data #583

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7e7750f
Add: An interval to process the questions only after they load
ibrahimmoazzam Oct 31, 2024
b7eae78
Merge branch 'RunestoneInteractive:main' into pi-review-page-no-data-fix
ibrahimmoazzam Nov 21, 2024
4fa8bab
Remove: console.log for questions
ibrahimmoazzam Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/rsptx/templates/assignment/instructor/reviewPeerAssignment.html
View file
Original file line number Diff line number Diff line change
@@ -79,7 +79,7 @@ <h1 id="assignment_name" class="mt-3" style='text-align:center'>{{ assignment_de
{% for q in questions %}
<div class="row question-row" id="question-{{ loop.index }}" style="display: none;">
<div class="question-controls mb-3">
<h2>Question {{ loop.index }}</h2>
<h2>Question {{ loop.index }} of {{ questions|length }}</h2>
{% if questions|length > 1 %}
<div class="row" style="text-align: center;">
<button id="prev-btn-{{ loop.index }}" class="btn btn-primary" onclick="showPreviousQuestion()">Previous</button>
139 changes: 74 additions & 65 deletions components/rsptx/templates/staticAssets/assignment/instructor.js
View file
Original file line number Diff line number Diff line change
@@ -223,76 +223,85 @@ function renderAltairChart(containerId, data, title) {

// Have to divide this code into functions
document.addEventListener("DOMContentLoaded", () => {
questionsData = JSON.parse(document.getElementById("questions-data").textContent);

questionsData.forEach((q, index) => {
const questionIndex = index + 1;

// Calculate the total votes for each voting stage
const totalVote1 = Object.values(q.total_votes.vote_1.counts).reduce((a, b) => a + b, 0);
const totalVote2 = Object.values(q.total_votes.vote_2.counts).reduce((a, b) => a + b, 0);

let {answerElementID, feedbackText} = extractAnswerAndFeedback(q.htmlsrc);
// Checking if the correct answer has been specified in the question
if (answerElementID && totalVote1 > 0) {
const correctOption = letterToNumber(answerElementID[answerElementID.length - 1]);

// Need to use toString because the correct choice is a string
const correctVote1 = q.total_votes.vote_1.counts[correctOption.toString()] || 0;
const correctVote2 = q.total_votes.vote_2.counts[correctOption.toString()] || 0;

// Calculate the percentage of correct votes in each voting stage
const correctVote1Percentage = Math.round((correctVote1 / totalVote1) * 100);
const correctVote2Percentage = Math.round((correctVote2 / totalVote2) * 100);

// Dealing with the edge case where there are no votes for the second voting stage (i.e., NaN correctVote2Percentage)
if (totalVote2 > 0) {
// Calculate the learning gain
const learningGain = correctVote2Percentage - correctVote1Percentage;
const potentialImprovement = 100 - correctVote1Percentage;
// Calculate the normalized change
const normalizedChange = correctVote1Percentage === 100 ? "N/A" : Math.round((learningGain / potentialImprovement) * 100);

// Update the normalized change card's text
const normalizedChangeCard = document.getElementById(`normalized-change-card-${questionIndex}`);
const normalizedChangePercentage = document.getElementById(`normalized-change-${questionIndex}`);
if (normalizedChange !== "N/A") {
normalizedChangePercentage.textContent = normalizedChange + "%";
normalizedChangeCard.classList.add("bg-info");
}
}
const first_interval = setInterval(() => {
questionsData = JSON.parse(document.getElementById("questions-data").textContent);

if (questionsData) {
clearInterval(first_interval);
// console.log("Questions data:", questionsData);
questionsData.forEach((q, index) => {
const questionIndex = index + 1;
// Calculate the total votes for each voting stage
const totalVote1 = Object.values(q.total_votes.vote_1.counts).reduce((a, b) => a + b, 0);
const totalVote2 = Object.values(q.total_votes.vote_2.counts).reduce((a, b) => a + b, 0);

// TODO: Perhaps the only other place I can think of where we can add an interval
let {answerElementID, feedbackText} = extractAnswerAndFeedback(q.htmlsrc);
// Checking if the correct answer has been specified in the question and there are votes for at least the first voting stage
if (answerElementID && totalVote1 > 0) {
const correctOption = letterToNumber(answerElementID[answerElementID.length - 1]);

// Need to use toString because the correct choice is a string
const correctVote1 = q.total_votes.vote_1.counts[correctOption.toString()] || 0;
const correctVote2 = q.total_votes.vote_2.counts[correctOption.toString()] || 0;

// Calculate the percentage of correct votes in each voting stage
const correctVote1Percentage = Math.round((correctVote1 / totalVote1) * 100);
const correctVote2Percentage = Math.round((correctVote2 / totalVote2) * 100);

// Dealing with the edge case where there are no votes for the second voting stage (i.e., NaN correctVote2Percentage)
if (totalVote2 > 0) {
// Calculate the learning gain
const learningGain = correctVote2Percentage - correctVote1Percentage;
const potentialImprovement = 100 - correctVote1Percentage;
// Calculate the normalized change
const normalizedChange = correctVote1Percentage === 100 ? "N/A" : Math.round((learningGain / potentialImprovement) * 100);

// Update the normalized change card's text
const normalizedChangeCard = document.getElementById(`normalized-change-card-${questionIndex}`);
const normalizedChangePercentage = document.getElementById(`normalized-change-${questionIndex}`);
if (normalizedChange !== "N/A") {
normalizedChangePercentage.textContent = normalizedChange + "%";
normalizedChangeCard.classList.add("bg-info");
}
}

// Update the effectiveness card's text and color
const effectivenessCard = document.getElementById(`effectiveness-card-${questionIndex}`);
const effectivenessPercentage = document.getElementById(`effectiveness-percentage-${questionIndex}`);
effectivenessPercentage.textContent = correctVote1Percentage + "%";
if (correctVote1Percentage >= 30 && correctVote1Percentage <= 70) {
effectivenessCard.classList.add("bg-success");
} else {
effectivenessCard.classList.add("bg-warning");
}
// Update the effectiveness card's text and color
const effectivenessCard = document.getElementById(`effectiveness-card-${questionIndex}`);
const effectivenessPercentage = document.getElementById(`effectiveness-percentage-${questionIndex}`);
effectivenessPercentage.textContent = correctVote1Percentage + "%";
if (correctVote1Percentage >= 30 && correctVote1Percentage <= 70) {
effectivenessCard.classList.add("bg-success");
} else {
effectivenessCard.classList.add("bg-warning");
}

// Interval to ensure the answersList for the question is not empty
const interval = setInterval(() => {
if (answersList[q.name] && answersList[q.name].length > 0) {
clearInterval(interval);
// Interval to ensure the answersList for the question is not empty
const second_interval = setInterval(() => {
if (answersList[q.name] && answersList[q.name].length > 0) {
clearInterval(second_interval);

const vote1Data = generateChartData(q.total_votes.vote_1.counts, correctOption, answersList[q.name]);
const vote2Data = generateChartData(q.total_votes.vote_2.counts, correctOption, answersList[q.name]);
const vote1Data = generateChartData(q.total_votes.vote_1.counts, correctOption, answersList[q.name]);
const vote2Data = generateChartData(q.total_votes.vote_2.counts, correctOption, answersList[q.name]);

renderAltairChart(`chart-vote1-${questionIndex}`, vote1Data, `Vote 1 Results (n=${totalVote1})`);
renderAltairChart(`chart-vote2-${questionIndex}`, vote2Data, `Vote 2 Results (n=${totalVote2})`);
renderAltairChart(`chart-vote1-${questionIndex}`, vote1Data, `Vote 1 Results (n=${totalVote1})`);
renderAltairChart(`chart-vote2-${questionIndex}`, vote2Data, `Vote 2 Results (n=${totalVote2})`);
}
}, 100);
}
else {
// If the correct answer is not specified or there are no votes for the question, don't render the charts
const vote1ChartDiv = document.getElementById(`chart-vote1-${questionIndex}`);
const vote2ChartDiv = document.getElementById(`chart-vote2-${questionIndex}`);
vote1ChartDiv.textContent = "No data for vote 1.";
vote2ChartDiv.textContent = "No data for vote 2.";
}
}, 100);

showQuestion(currentQuestionIndex);
});
}
else {
// If the correct answer is not specified, don't render the charts
const vote1ChartDiv = document.getElementById(`chart-vote1-${questionIndex}`);
const vote2ChartDiv = document.getElementById(`chart-vote2-${questionIndex}`);
vote1ChartDiv.textContent = "No data for vote 1.";
vote2ChartDiv.textContent = "No data for vote 2.";
console.log("Questions data not found.");
}

showQuestion(currentQuestionIndex);
});
});
}, 100);
});