From c047096d391cf6b6f6d66157e8bdb52836f775ef Mon Sep 17 00:00:00 2001 From: arielfayol37 Date: Mon, 27 Nov 2023 21:36:15 -0600 Subject: [PATCH 1/2] improved variable creation in create_question --- deimos/static/deimos/images/ai.jpeg | Bin 0 -> 11212 bytes phobos/static/phobos/css/style.css | 32 +- phobos/static/phobos/js/create_question.js | 359 ++++++++++++------- phobos/templates/phobos/create_course.html | 2 +- phobos/templates/phobos/create_question.html | 58 +-- phobos/views.py | 2 - 6 files changed, 290 insertions(+), 163 deletions(-) create mode 100644 deimos/static/deimos/images/ai.jpeg diff --git a/deimos/static/deimos/images/ai.jpeg b/deimos/static/deimos/images/ai.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..551b1b3e51cedfe8695bb823aaf605aaa40dd61b GIT binary patch literal 11212 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 * { + width: 30%; +} .mp-input-div { display: flex; flex-direction: column; @@ -458,10 +469,7 @@ div.image-container img.course-image { .mp-inputs input{ width:49% !important; } -.add-var-section { - position:absolute; - right: 2%; - transform: translateY(-100%); +.add-var-section { z-index:4; } .add-var-section button { @@ -478,9 +486,6 @@ div.image-container img.course-image { flex-direction: column; justify-content: center; align-items: center; - height: 0; - width: 0; - opacity: 0; transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out, width 0.5s ease; } .type-selection input[type="radio"]:checked::after { @@ -560,6 +565,15 @@ textarea { resize:initial; overflow: initial; } +/* +TODO: +set .formatted-answer-option.image { +height: 300px; +} +and set max-height of .image-in-formatted { +max-height: 70%; +} +*/ .formatted-answer-option.question-view { display: flex; flex-direction: row; @@ -575,8 +589,8 @@ textarea { } .image-in-formatted { - max-width: 70%; /* Limit image width to 100% of parent div's width */ - max-height: 300px; /* Limit image height to 100% of parent div's height */ + max-width: 70%; + max-height: 300px; display: block; /* Remove any extra space below the image */ border-radius: 10px; } diff --git a/phobos/static/phobos/js/create_question.js b/phobos/static/phobos/js/create_question.js index 1121febd..6d06db0b 100644 --- a/phobos/static/phobos/js/create_question.js +++ b/phobos/static/phobos/js/create_question.js @@ -4,7 +4,8 @@ document.addEventListener('DOMContentLoaded', () => { const form = document.querySelector('#question-form'); const allQuestionBlocks = form.querySelector("#all-question-blocks"); let currentAction = form.getAttribute('action'); - const varSymbolsArray = ['ò', 'ë', 'à', 'ê', 'ä', 'ï', 'ù', 'ô', 'ü', 'î', 'â', 'ö', 'ÿ', 'è', 'é', 'ç', 'û', 'β', 'я', 'α']; + var varSymbolsArray = ['ò', 'ë', 'à', 'ê', 'ä', 'ï', 'ù', 'ô', 'ü', 'î', 'â', 'ö', 'ÿ', 'è', 'é', 'ç', 'û', 'β', 'я', 'α']; + const addedVarsDiv = document.querySelector('.added-vars'); const screen = document.querySelector('#screen'); const calculatorDiv = document.querySelector('.calculator'); calculatorDiv.style.display = 'none'; @@ -269,145 +270,138 @@ function checkTopicAndSubtopic() { //-----------------------------HANDLING VARIABLES---------------------------------------// - const addVarBtn = document.querySelector('.var-btn'); const varInfoDiv = document.querySelector('.var-info-div'); const createdVarsDiv = document.querySelector('.created-vars'); var symbol = ''; var enteredDomain = ''; - varInfoDiv.style.opacity = '0'; - varInfoDiv.style.height = '0'; - varInfoDiv.style.width = '0'; - var state = 'closed'; - addVarBtn.addEventListener('click', (event) => { - event.preventDefault(); - if (state === 'closed') { - state = 'open'; - addVarBtn.innerHTML = '-'; - varInfoDiv.style.width = 'auto'; - varInfoDiv.style.height = 'auto'; // Set height to 'auto' to reveal content - varInfoDiv.style.opacity = '1'; // Set opacity to '1' to reveal content - varInfoDiv.style.overflow = 'visible'; // Set overflow to 'visible' to reveal content - } else if (state === 'open') { - state = 'closed'; - addVarBtn.innerHTML = '+'; - varInfoDiv.style.width = '0'; - varInfoDiv.style.height = '0'; // Set height to '0' to hide content - varInfoDiv.style.opacity = '0'; // Set opacity to '0' to hide content - varInfoDiv.style.overflow = 'hidden'; // Set overflow to 'hidden' to hide content + + function createVarFields(varInfoDiv, createTemplate = true){ + const varSymbolField = varInfoDiv.querySelector('.var-symbol'); + const varDomainField = varInfoDiv.querySelector('.var-domain'); + const varStepSize = varInfoDiv.querySelector('.var-step-size'); + const intRadio = varInfoDiv.querySelector('.var-type-int'); + const floatRadio = varInfoDiv.querySelector('.var-type-float'); + symbol = varSymbolField.value; + // Checking whether it's a valid symbol + if (symbol.length === 0 ){ + alert('You must enter a symbol'); + return; + } else if(varSymbolsArray.includes(symbol)){ + alert('Symbol already in use'); + return; + }else if(symbol.length === 1) + { + if(/[aijk]/.test(symbol)){ + alert('Unauthorized symbol due to vectors, trigonometric, or complex numbers issues (5i -2j + k, a +bi, asin, arctan, arccos, etc)'); + return; + } + } + else if ((symbol.length === 2) || (/^[a-zA-Z]$/.test(symbol.charAt(0)) === false) || + ((symbol.charAt(1) != '_') && (symbol.length>=3))){ + alert('Invalid symbol'); + return; + }else if(symbol.length > 10){ + alert('Symbol cannot be more than 10 characters'); + return; + } + // Checking whether domain entered is valid + enteredDomain = varDomainField.value; + var parsedDomain = parseDomainInput(enteredDomain); + if(parsedDomain.length === 0){ + alert('Invalid domain'); + return; + } + + // Checking if the step size is valid + if(varStepSize.value.length >= 1 && isNaN(parseFloat(varStepSize.value))){ + alert('Step size must be an int or float'); + return + } else if(varStepSize.value.length == 0){ + varStepSize.value = 0 // if no step size is given. } - }); - + // passed all the tests + varSymbolsArray.push(symbol); // adding the symbol to the list of symbols. + const newVarDiv = document.createElement('div'); + const newVarBtn = document.createElement('button'); + newVarBtn.type = 'button'; + newVarBtn.classList.add('btn', 'btn-warning'); // Separate the classes + if(symbol.length >=3){ + newVarBtn.innerHTML = `${symbol.charAt(0)}${symbol.slice(2)}` + }else{ + newVarBtn.innerHTML = symbol; // if symbol is one character. + } + + newVarDiv.appendChild(newVarBtn); + newVarDiv.classList.add('variable', `${symbol}-var-div`); + newVarDiv.setAttribute('data-symbol', symbol); + + // Putting the variable type and step size in hidden input fields. + + // Var Type + const varTypeHiddenInput = document.createElement('input'); + varTypeHiddenInput.type = 'hidden'; + varTypeHiddenInput.name = `var#type#${symbol}` + if(intRadio.checked){ + varTypeHiddenInput.value = '0' + } else { + varTypeHiddenInput.value = '1' + } + + // Step size + const stepSizeHiddenInput = document.createElement('input'); + stepSizeHiddenInput.type = 'hidden'; + stepSizeHiddenInput.name = `step#size#${symbol}` + stepSizeHiddenInput.value = varStepSize.value + + varTypeHiddenInput.classList.add('var-hidden-i'); + stepSizeHiddenInput.classList.add('var-hidden-i'); + + if(createTemplate){ + var varContainer = createVarTemplate(symbol, enteredDomain, varStepSize.value, intRadio.checked); + }else { + var varContainer = varInfoDiv; + + } + + // appending the hidden inputs to varBtn + varContainer.appendChild(varTypeHiddenInput); + varContainer.appendChild(stepSizeHiddenInput); + + for (let i = 0; i < parsedDomain.length; i++) { + // Getting the variable intervals. + const domainLbHiddenInput = document.createElement('input'); + domainLbHiddenInput.type = 'hidden'; + domainLbHiddenInput.name = `domain#lb#${symbol}#${i}`//domain lower bound + domainLbHiddenInput.value = parsedDomain[i].lower + + const domainUbHiddenInput = document.createElement('input'); + domainUbHiddenInput.type = 'hidden'; + domainUbHiddenInput.name = `domain#ub#${symbol}#${i}`//domain upper bound + domainUbHiddenInput.value = parsedDomain[i].upper + + domainLbHiddenInput.classList.add('var-hidden-i'); + domainUbHiddenInput.classList.add('var-hidden-i'); + varContainer.appendChild(domainLbHiddenInput); + varContainer.appendChild(domainUbHiddenInput); + } + + if(createTemplate){ + addedVarsDiv.appendChild(varContainer); + // clear input fields. + varInfoDiv.querySelectorAll('.field-style').forEach((inp)=>{ + inp.value = ''; + }) + } + return newVarDiv; + } + + varInfoDiv.addEventListener('click', (event)=>{ //event.preventDefault(); if(event.target.classList.contains('btn-create-var')){ - const varSymbolField = varInfoDiv.querySelector('.var-symbol'); - const varDomainField = varInfoDiv.querySelector('.var-domain'); - const varStepSize = varInfoDiv.querySelector('.var-step-size'); - const intRadio = varInfoDiv.querySelector('input[name="varType"][value="int"]'); - const floatRadio = varInfoDiv.querySelector('input[name="varType"][value="float"]'); - symbol = varSymbolField.value; - // Checking whether it's a valid symbol - if (symbol.length === 0 ){ - alert('You must enter a symbol'); - return; - } else if(varSymbolsArray.includes(symbol)){ - alert('Symbol already in use'); - return; - }else if(symbol.length === 1) - { - if(/[aijk]/.test(symbol)){ - alert('Unauthorized symbol due to vectors, trigonometric, or complex numbers issues (5i -2j + k, a +bi, asin, arctan, arccos, etc)'); - return; - } - } - else if ((symbol.length === 2) || (/^[a-zA-Z]$/.test(symbol.charAt(0)) === false) || - ((symbol.charAt(1) != '_') && (symbol.length>=3))){ - alert('Invalid symbol'); - return; - }else if(symbol.length > 10){ - alert('Symbol cannot be more than 10 characters'); - return; - } - // Checking whether domain entered is valid - enteredDomain = varDomainField.value; - var parsedDomain = parseDomainInput(enteredDomain); - if(parsedDomain.length === 0){ - alert('Invalid domain'); - return; - } - - // Checking if the step size is valid - if(varStepSize.value.length >= 1 && isNaN(parseFloat(varStepSize.value))){ - alert('Step size must be an int or float'); - return - } else if(varStepSize.value.length == 0){ - varStepSize.value = 0 // if no step size is given. - } - - // passed all the tests - varSymbolsArray.push(symbol); // adding the symbol to the list of symbols. - const newVarDiv = document.createElement('div'); - const newVarBtn = document.createElement('button'); - newVarBtn.type = 'button'; - newVarBtn.classList.add('btn', 'btn-warning'); // Separate the classes - if(symbol.length >=3){ - newVarBtn.innerHTML = `${symbol.charAt(0)}${symbol.slice(2)}` - }else{ - newVarBtn.innerHTML = symbol; // if symbol is one character. - } - - newVarDiv.appendChild(newVarBtn); - newVarDiv.classList.add('variable'); - newVarDiv.setAttribute('data-symbol', symbol); - - // Putting the variable type and step size in hidden input fields. - - // Var Type - const varTypeHiddenInput = document.createElement('input'); - varTypeHiddenInput.type = 'hidden'; - varTypeHiddenInput.name = `var#type#${symbol}` - if(intRadio.checked){ - varTypeHiddenInput.value = '0' - } else { - varTypeHiddenInput.value = '1' - } - - // Step size - const stepSizeHiddenInput = document.createElement('input'); - stepSizeHiddenInput.type = 'hidden'; - stepSizeHiddenInput.name = `step#size#${symbol}` - stepSizeHiddenInput.value = varStepSize.value - - // appending the hidden inputs to varBtn - newVarBtn.appendChild(varTypeHiddenInput); - newVarBtn.appendChild(stepSizeHiddenInput); - - for (let i = 0; i < parsedDomain.length; i++) { - // Getting the variable intervals. - const domainLbHiddenInput = document.createElement('input'); - domainLbHiddenInput.type = 'hidden'; - domainLbHiddenInput.name = `domain#lb#${symbol}#${i}`//domain lower bound - domainLbHiddenInput.value = parsedDomain[i].lower - - const domainUbHiddenInput = document.createElement('input'); - domainUbHiddenInput.type = 'hidden'; - domainUbHiddenInput.name = `domain#ub#${symbol}#${i}`//domain upper bound - domainUbHiddenInput.value = parsedDomain[i].upper - - newVarBtn.appendChild(domainLbHiddenInput); - newVarBtn.appendChild(domainUbHiddenInput); - } - - createdVarsDiv.appendChild(newVarDiv); - createdVarsDiv.scrollIntoView({behavior:"smooth"}); - varInfoDiv.style.opacity = '0'; - varInfoDiv.style.height = '0'; - varInfoDiv.style.width = '0'; - state ='closed'; - addVarBtn.innerHTML = '+'; - + createdVarsDiv.appendChild(createVarFields(varInfoDiv)); } }) @@ -444,7 +438,85 @@ function checkTopicAndSubtopic() { } +function createVarTemplate(symbol, intervals, stepsize="", is_int=false){ + const varDiv = document.createElement('div'); + varDiv.classList.add('var-container') + const htmlContent = ` +
+
+
+ +
+ + +
+ +
+ + +
+
+ `; + varDiv.innerHTML = htmlContent; + varDiv.querySelector('.btn-create-var').addEventListener('click', (event)=>{ + const container = event.target.closest('.var-container'); + const instanceSymbol = container.querySelector('.var-symbol').value; + if(event.target.classList.contains('edit')){ + + // removing the var from the displayed symbol + createdVarsDiv.querySelector(`.${instanceSymbol}-var-div`).remove(); + // removing the symbol from the symbols array. + varSymbolsArray = varSymbolsArray.filter(string => string !== instanceSymbol); + + // enabling the input fields + container.querySelectorAll('input').forEach((inp)=>{ + if(inp.type != "hidden"){ + inp.disabled = false; + } + }) + + // deleting the hidden input fields that stored the data + container.querySelectorAll('.var-hidden-i').forEach((hinp)=>{ + hinp.remove(); + }) + + event.target.classList.remove('edit'); + event.target.innerHTML = 'save'; + + }else { + + //Saving the data + createdVarsDiv.appendChild(createVarFields(container, false)); + + // disabling the input fields + container.querySelectorAll('input').forEach((inp)=>{ + if(inp.type != "hidden"){ + inp.disabled = true; + } + }) + event.target.classList.add('edit'); + event.target.innerHTML = 'edit'; + } + + }) + + varDiv.querySelector('.var-delete-btn').addEventListener('click', (event)=>{ + varDiv.remove(); + const container = event.target.closest('.var-container'); + const instanceSymbol = container.querySelector('.var-symbol').value; + // removing the var from the displayed symbol + createdVarsDiv.querySelector(`.${instanceSymbol}-var-div`).remove(); + // removing the symbol from the symbols array. + varSymbolsArray = varSymbolsArray.filter(string => string !== instanceSymbol); + }) + + return varDiv; +} @@ -767,6 +839,7 @@ mpBtn.addEventListener('click', (event)=>{ calculatorDiv.style.display = 'none'; mcqOptionBtnsDiv.style.display = 'none'; mpInputDiv.style.display = 'block'; + mcqInputDiv.style.display = 'none'; questionTypeDicts[questionBlock.querySelector('.question-number-value').value] = '8'; }); @@ -1671,6 +1744,32 @@ function createQuestionBlock(){ +const sideInfosIcons = document.querySelectorAll('.side-info-icon'); +const sideInfox = document.querySelectorAll('.side-info-x'); + +sideInfox.forEach((Xbtn)=>{ + Xbtn.addEventListener('click', (event)=>{ + event.preventDefault(); + const sideDiv = Xbtn.closest('.side'); + sideDiv.querySelector('.side-info').classList.add('hide'); + }) + }) + var sideCounters = 0 + sideInfosIcons.forEach((sideInfoIcon)=>{ + sideInfoIcon.style.top = `${70 + 8*sideCounters}%` + sideCounters += 1; + sideInfoIcon.addEventListener('click', (event)=>{ + event.preventDefault(); + const sideDiv = sideInfoIcon.closest('.side'); + sideDiv.querySelector('.side-info').classList.remove('hide'); + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); + }) + }) + + ///------------------------------EDIT QUESTION --------------------------------------///// diff --git a/phobos/templates/phobos/create_course.html b/phobos/templates/phobos/create_course.html index beff4479..db59d090 100644 --- a/phobos/templates/phobos/create_course.html +++ b/phobos/templates/phobos/create_course.html @@ -14,7 +14,7 @@

Create a New Course

-
+ {% csrf_token %}
diff --git a/phobos/templates/phobos/create_question.html b/phobos/templates/phobos/create_question.html index 3037165d..075a9678 100644 --- a/phobos/templates/phobos/create_question.html +++ b/phobos/templates/phobos/create_question.html @@ -20,27 +20,6 @@
- -
- -
-
-
-
- -
- - -
-
- -
- -

@@ -162,6 +141,43 @@

Settings

+
+
+ +
+
+ X
+
+

Variables

+ +
+ +
+
+
+
+ +
+ + +
+
+ +
+ +
+
+
+ +
+ +
+ +
diff --git a/phobos/views.py b/phobos/views.py index 1371f415..53e87793 100644 --- a/phobos/views.py +++ b/phobos/views.py @@ -692,8 +692,6 @@ def question_view(request, question_id, assignment_id=None, course_id=None): labels_urls_list = [(question_image.label, question_image.image.url) for question_image in \ question.images.all()] question.text = replace_image_labels_with_links(question.text, labels_urls_list) - question.text = question.text.replace('@{', '') - question.text = question.text.replace('}@', '') answers = [] qtype = '' # Check if the answer type starts with MCQ or STRUCT From ee41d6b6619fd5d20c1bb4143c7ab1f8ec5ec99b Mon Sep 17 00:00:00 2001 From: arielfayol37 Date: Mon, 27 Nov 2023 21:40:49 -0600 Subject: [PATCH 2/2] remove beforeUnpload bug --- astros/templates/astros/layout.html | 6 ------ deimos/templates/deimos/layout.html | 6 ------ phobos/static/phobos/js/create_question.js | 7 ------- phobos/templates/phobos/layout.html | 6 ------ 4 files changed, 25 deletions(-) diff --git a/astros/templates/astros/layout.html b/astros/templates/astros/layout.html index 9cbc2167..9b005b10 100644 --- a/astros/templates/astros/layout.html +++ b/astros/templates/astros/layout.html @@ -73,11 +73,5 @@ window.addEventListener('load', ()=>{ loader.classList.add('hide'); }); - document.querySelectorAll('a').forEach(function(link) { - link.addEventListener('click', function(e) { - // Your logic here - loader.classList.remove('hide'); - }); - }); \ No newline at end of file diff --git a/deimos/templates/deimos/layout.html b/deimos/templates/deimos/layout.html index be0b550b..692153d7 100644 --- a/deimos/templates/deimos/layout.html +++ b/deimos/templates/deimos/layout.html @@ -62,11 +62,5 @@ window.addEventListener('load', ()=>{ loader.classList.add('hide'); }); - document.querySelectorAll('a').forEach(function(link) { - link.addEventListener('click', function(e) { - // Your logic here - loader.classList.remove('hide'); - }); - }); \ No newline at end of file diff --git a/phobos/static/phobos/js/create_question.js b/phobos/static/phobos/js/create_question.js index c329e745..6d06db0b 100644 --- a/phobos/static/phobos/js/create_question.js +++ b/phobos/static/phobos/js/create_question.js @@ -1,13 +1,6 @@ document.addEventListener('DOMContentLoaded', () => { const preloader = document.querySelector('#preloader'); - - window.addEventListener('beforeunload', function (event) { - // Your logic here - preloader.classList.remove('hide'); - event.returnValue = true; // Chrome requires returnValue to be set - }); - const form = document.querySelector('#question-form'); const allQuestionBlocks = form.querySelector("#all-question-blocks"); let currentAction = form.getAttribute('action'); diff --git a/phobos/templates/phobos/layout.html b/phobos/templates/phobos/layout.html index 9674597c..d620091d 100644 --- a/phobos/templates/phobos/layout.html +++ b/phobos/templates/phobos/layout.html @@ -67,12 +67,6 @@ window.addEventListener('load', ()=>{ loader.classList.add('hide'); }); - document.querySelectorAll('a').forEach(function(link) { - link.addEventListener('click', function(e) { - // Your logic here - loader.classList.remove('hide'); - }); - }); \ No newline at end of file