Ich habe es mittlerweile geschafft meine Frage zu programmieren. Da ich erst jetzt mit Javascript in Berührung kam, ist das Skript wahrscheinlich nicht das sauberste. Um anderen aber auch die Möglichkeit zu geben, einen Schieberegler mit mehreren Ausweichmöglichkeiten (im Sinne einer vollbeschrifteten Skala) zu kombinieren, füge ich anbei mein Skript an (aufbauend auf dem Beispielskript von SoSci Survey zum Schieberegler mit Skala) .
Was ist anders, als bei dem Skript von SoSci Survey:
- Der Schieberegler wird nicht deaktiviert; es scheint für die Respondenten nur so. Tatsächlich wird der Schiebereglerknopf einfach nur unsichtbar gemacht. Das hat den Vorteil, dass...
- ...Der Schieberegler wieder erscheint/aktiv ist, sobald ein Respondent draufklickt.
- Schieberegler und Ausweichoptionen hängen voneinander ab. Wird eines angeklickt, wird das jeweils andere Element 'abgewählt' und die Werte entsprechend gespeichert.
- Die Operationalisierung der Items, Fragekennungen und Anzahl der Ausweichkategorien passiert nicht im Javascript, sondern über Placeholder im PHP code auf der entsprechenden Fragebogenseite selbst. Dadurch kann ich man den gleichen Textbaustein bei allen enstprechenden Kombifragen verwenden. Dies sieht bei mir folgendermaßen aus:
replace('%sliderID%', '\'AB01\'', 'text');
replace('%scaleID%', '\'AB02\'', 'text');
replace('%optout%', '1,2', 'text'); //bei zwei Ausweichoptionen
replace('%items%', '1,2,4,5,6,7', 'text'); //hier können auch einzelne Items weggelassen werden; vor allem relevant, wenn durch Filterführungen nicht alle Items gezeigt werden sollen
question('AB01','combine=AB02');
Damit das Skript funktioniert, sollte in den Einstellungen vom Fragebogen das Häkchen bei der Option gesetzt werden, dass Skalenitems durch einen erneuten Klick auch wieder abgewählt werden können. Das Skript wurde überarbeitet und berücksichtigt mittlerweile alle Kommentare, die noch unter dieser Antwort gepostet wurden.
<script type="text/javascript">
<!--
//Combine slider and scale (e.g. to offer multiple opt out categories)
//Answer on slider is hidden (by simply hiding the slider button), if opt-out category is selected
//Answer on slider is re-shown (making the button visible again), if opt-out category is deselcted
//Opt out category is deselected if respondent clicks on slider again
//NB: Script doesn't work with onclick or attachEvent
// Define questions flexible via placeholder in PHP code
var sliderID = %sliderID%; // alternatively, fixed in javascript: var sliderID = "EZ21";
var scaleID = %scaleID%; // alternatively fixed in javascript: var scaleID = "EZ22";
// Define items flexible via placeholder in PHP code
var items = [];
items.push(%items%); //take items defined in PHP code (%items% is the placeholder) and push them into the javascript array
// Define scale options as opt out categories
var optout = [];
optout.push(%optout%);
// Remember slider values for re-appearing slider button
var sliderValues = [];
// Attach events to interactive elements
SoSciTools.attachEvent(window, 'load', function() {
// loop through all items of question
for (let ii=0; ii<items.length; ii++) {
let item = items[ii]; //important: "let item" NOT "var item"! var item references to the last index of item after looping through all items
refreshSlider(item);
//loop through all opt out categoris of the scale
for (let io=0; io<optout.length; io++) {
var option = optout[io];
//Set correct ID (option only necessary if more than one opt out category)
if (optout.length < 2){
var scaleOption = document.getElementById(makeID(scaleID, item));
} else {
var scaleOption = document.getElementById(makeID(scaleID, item, option));
}
// Attach event to click on scale options:
// Via AddEventListener & anonymous funcion
scaleOption.addEventListener('click', () => {
refreshSlider(item);
});
// Via AddEventListener & bind
//scaleOption.addEventListener('click', refreshSlider.bind(this, item));
}
// Attach event to click on slider
var slidername = makeID(sliderID, item) + "_" + "scale"; //Id's are: EZ21_01_scale ...
console.log(slidername);
var slider = document.getElementById(slidername);
// Via AddEventListener & anonymous funcion
slider.addEventListener('click', () => {
refreshScale(item);
});
// Via AddEventListener & bind
//slider.addEventListener('click', refreshScale.bind(this, item));
}
});
//-----FUNCTIONS-----
//Function to create appropriate ID to access the correct element
function makeID(questionID, item, option) {
var itemID = String(item);
if (itemID.length < 2) {
itemID = "0" + itemID;
}
var itemFull = questionID + "_" + itemID;
if (!option) {
return itemFull;
}
return itemFull + option;
}
//Refresh slider function (called after click on opt out category)
function refreshSlider(item) {
var slider = SoSciSliders.getSlider(makeID(sliderID, item));
console.log("I am in the slider loop");
console.log("item is:", item);
//Check whether opt out categories are "unselected" after a click (respondents might deselect an opt-out category)
//Loop through all opt out categories
for (let i=0; i<optout.length; i++) {
var option = optout[i];
//Set correct ID (option only necessary if more than one opt out category)
if (optout.length < 2){
var scaleOption = document.getElementById(makeID(scaleID, item));
} else {
var scaleOption = document.getElementById(makeID(scaleID, item, option));
}
//Check whether opt out category is NOT selected
if (scaleOption.checked == false){
//Check whether a slider value was stored previously for that item (i.e. the sliderValues array is not empty at the corresponding slot of the item and thus returns "true")
if (sliderValues[item-1]){
//replace -9 by former slider value
slider.value = sliderValues[item-1];
}
//Make slider button visible again
var buttonID = makeID(sliderID, item) + "_" + "button";
var sliderbutton = document.getElementById(buttonID);
sliderbutton.style.visibility = "visible";
console.log("no scale option is checked");
//If an opt out category is selected
} else {
//Hide slider button
var buttonID = makeID(sliderID, item) + "_" + "button";
var sliderbutton = document.getElementById(buttonID);
sliderbutton.style.visibility = "hidden";
console.log("A scale option is checked");
//Set slider value to -9
slider.value = -9;
return; //important; function is interrupted as soon as an opt out category is identified as checked/selected
}
}
}
//Refresh scale function (called after click on slider)
function refreshScale(item) {
var slider = SoSciSliders.getSlider(makeID(sliderID, item));
var buttonID = makeID(sliderID, item) + "_" + "button";
console.log("I am in the scale loop");
console.log("item is:", item);
console.log(slider.value);
//Deselect opt out categories
for (let ix=0; ix<optout.length; ix++) {
var option = optout[ix];
//Set correct ID (option only necessary if more than one opt out category)
if (optout.length < 2){
var scaleOption = document.getElementById(makeID(scaleID, item));
} else {
var scaleOption = document.getElementById(makeID(scaleID, item, option));
}
var Optioncheck = scaleOption.checked;
if (Optioncheck == true){
scaleOption.checked = false;
}
}
//Make slider button visible
var sliderbutton = document.getElementById(buttonID);
sliderbutton.style.visibility = "visible";
//Store slider value (to remember it, in case opt out categories are deselected)
sliderValues[item-1] = slider.value;
}
</script>