205 lines
8 KiB
JavaScript
205 lines
8 KiB
JavaScript
"use strict";
|
|
|
|
// The DOM elements representing the different sections
|
|
const independentVariables = document.querySelector(".independent-variables")
|
|
const dependentVariables = document.querySelector(".dependent-variables")
|
|
const continueButton = document.querySelector(".analyse-continue")
|
|
|
|
// The DOM elements representing the question text
|
|
const firstQuestion = document.querySelector(".first-variable-question")
|
|
const secondQuestion = document.querySelector(".second-variable-question")
|
|
|
|
|
|
// The DOM elements representing the select fields
|
|
const independentVariableList = document.querySelector(".independent-variable")
|
|
const dependentVariableList = document.querySelector(".dependent-variable")
|
|
const statisticalTestList = document.querySelector(".statistical-test")
|
|
|
|
// The DOM elements representing different information to be given to the user, depending on what test they pick
|
|
const testInfo = document.querySelector(".test-info")
|
|
const independentInfo = document.querySelector(".iv-info")
|
|
const dependentInfo = document.querySelector(".dv-info")
|
|
|
|
// A boolean flag, to keep track of how many variables in the chosen statistical test
|
|
let one_variable = false
|
|
|
|
|
|
// Information boxes for different data types
|
|
const nominal = `<span data-toggle='tooltip' class="badge badge-dark ml-3 help"
|
|
title='Nominal data has no numeric value (i.e. cannot be measured) and has no natural order to it. An example could be race, gender or yes/no questions.'>
|
|
Nominal</span>`
|
|
const ordinal = `<span data-toggle='tooltip' class="badge badge-dark ml-3 help"
|
|
title='Ordinal data has no numeric value but it does have a natural order. An example could be positions in a race (first, second, third) or Likert type questions (answers ranging from strongly agree to strongly disagree).'>
|
|
Ordinal</span>`
|
|
const interval = `<span data-toggle='tooltip' class="badge badge-dark ml-3 help"
|
|
title='Interval data has numeric value, with equal value between each point, but 0 does not mean absolute 0. An example could be temperature in Celcius (0°C does not mean absolute 0 since you can have negative degree Celcius)'>
|
|
Interval</span>`
|
|
const ratio = `<span data-toggle='tooltip' class="badge badge-dark ml-3 help"
|
|
title='Ratio data is similar to interval data in that it has numeric value, but it also has absolute 0 (i.e. no negative values). An example could be weight or height.'>
|
|
Ratio</span>`
|
|
|
|
|
|
const tests = [
|
|
{
|
|
"name": "Kruskall Wallis Test",
|
|
"variable1": {
|
|
"name": "independent variable",
|
|
"type": [nominal, ordinal]
|
|
},
|
|
"variable2": {
|
|
"name": "dependent variable",
|
|
"type": [ordinal, interval, ratio]
|
|
},
|
|
"info": `Kruskal Wallis test is commonly used to test the null hypothesis that the samples (groups) are from
|
|
the same population. It tests one categorical variable against a measurable variable.
|
|
The dependent variable must be ordinal, interval or ratio. Typically, this test is used to test when you have
|
|
3 or more different groups in your independent variable, but can also be used for just 2 groups (examples could be
|
|
3 groups: low/medium/high income, 2 groups: yes/no answers).`
|
|
},
|
|
{
|
|
"name": "Mann-Whitney U Test",
|
|
"variable1": {
|
|
"name": "independent variable",
|
|
"type": [nominal, ordinal]
|
|
},
|
|
"variable2": {
|
|
"name": "dependent variable",
|
|
"type": [ordinal, interval, ratio]
|
|
},
|
|
"info": `The Mann-Whitney U test is used to check if observations in one sample are larger
|
|
than observations in the other sample. It requires that the independent variable
|
|
consists of just 2 categorical groups (e.g. questions with yes/no answers). If your
|
|
independent variable contains more groups then the Kruskall Wallis test should be used.`
|
|
},
|
|
{
|
|
"name": "Chi-Square Test",
|
|
"variable1": {
|
|
"name": "first variable",
|
|
"type": [nominal, ordinal]
|
|
},
|
|
"variable2": {
|
|
"name": "second variable",
|
|
"type": [nominal, ordinal]
|
|
},
|
|
"info": `The Chi Square test requires that both variables be categorical (i.e. nominal or ordinal).
|
|
Both variables should contain 2 or more distinct categorical groups (e.g.
|
|
2 groups: yes/no answers, 3 groups: low/medium/high income) Furthermore, these groups must
|
|
be independent (i.e. no subjects are in more than one group).`
|
|
},
|
|
{
|
|
"name": "Chi-Square goodness of fit",
|
|
"variable1": {
|
|
"name": "first variable",
|
|
"type": [nominal, ordinal]
|
|
},
|
|
"info": `The Chi Square goodness of fit takes one categorical variable. It is used to see if the
|
|
different categories in that variable follow the same distribution that you would expect.
|
|
Assumes that the expected distribution is even accross groups, that each group is mutually
|
|
exclusive from the next and each group contains at least 5 subjects.`
|
|
}
|
|
]
|
|
|
|
|
|
if(statisticalTestList.value != ""){
|
|
// Using Jquery, initialise Popper.js tooltips
|
|
$(function () {
|
|
$("[data-toggle='tooltip']").tooltip();
|
|
});
|
|
populateInfo();
|
|
// Add event listeners that re-sets the options whenever one is changed
|
|
independentVariableList.onchange = function(){
|
|
setSelectOptions(independentVariableList, dependentVariableList);
|
|
}
|
|
dependentVariableList.onchange = function(){
|
|
setSelectOptions(dependentVariableList, independentVariableList);
|
|
}
|
|
}
|
|
|
|
|
|
statisticalTestList.onchange = function (){
|
|
// Using Jquery, initialise Popper.js tooltips
|
|
$(function () {
|
|
$("[data-toggle='tooltip']").tooltip();
|
|
});
|
|
populateInfo();
|
|
// Add event listeners that re-sets the options whenever one is changed
|
|
independentVariableList.onchange = function(){
|
|
if(one_variable == true){
|
|
revealHtml(independentVariableList, continueButton)
|
|
}
|
|
setSelectOptions(independentVariableList, dependentVariableList);
|
|
}
|
|
dependentVariableList.onchange = function(){
|
|
setSelectOptions(dependentVariableList, independentVariableList);
|
|
revealHtml(dependentVariableList, continueButton)
|
|
}
|
|
}
|
|
|
|
|
|
// A function that hides some select options, preventing user from picking the same option for both variables
|
|
function setSelectOptions(currentSelect, otherSelect){
|
|
let variable = currentSelect.value
|
|
for (var i=0; i < otherSelect.length; i++) {
|
|
if (otherSelect.options[i].value == variable){
|
|
otherSelect.options[i].hidden = true;
|
|
} else {
|
|
otherSelect.options[i].hidden = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Function that reveals the next section of HTML, after the user selects an option in the current section
|
|
function revealHtml(currentSelect, nextSection){
|
|
if(currentSelect.value != ""){
|
|
nextSection.classList.remove("hidden-down");
|
|
}
|
|
}
|
|
|
|
// Function that populates the html with information regarding the statistical test chosen and the variables required
|
|
function populateInfo(){
|
|
let test = getTest(statisticalTestList.value)
|
|
if(test){
|
|
// Populate the question titles, information and data types based on the selected test
|
|
// Question 1
|
|
firstQuestion.innerHTML = test.variable1.name
|
|
testInfo.innerHTML = test.info;
|
|
let ivTypes = `For this test the independent variable can be:`
|
|
test.variable1.type.forEach(variable => {
|
|
ivTypes += variable
|
|
})
|
|
independentInfo.innerHTML = ivTypes
|
|
if(test.variable2 == undefined){
|
|
one_variable = true;
|
|
independentVariables.classList.remove("hidden-down");
|
|
dependentVariables.classList.add("hidden-down");
|
|
revealHtml(independentVariableList, continueButton)
|
|
}else{
|
|
independentVariables.classList.remove("hidden-down");
|
|
dependentVariables.classList.remove("hidden-down");
|
|
revealHtml(dependentVariableList, continueButton)
|
|
one_variable = false;
|
|
// Question 2
|
|
secondQuestion.innerHTML = test.variable2.name
|
|
let dvTypes = `For this test the dependent variable can be:`
|
|
test.variable2.type.forEach(variable => {
|
|
dvTypes += variable
|
|
})
|
|
dependentInfo.innerHTML = dvTypes
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
function getTest(name){
|
|
let result
|
|
tests.forEach(test => {
|
|
if(test.name == name){
|
|
result = test;
|
|
}
|
|
})
|
|
return result
|
|
}
|
|
|
|
|
|
// setEventListeners()
|