Я новичок (и борюсь) с некоторым JavaScript, поэтому был бы признателен за помощь. Существует несколько вариантов завершения описанного ниже процесса, поэтому я сначала объясню, что я пытаюсь сделать на высоком уровне.
У меня есть опрос Qualtrics, в котором я хотел бы использовать горячую точку сизображение карты с несколькими местами на ней. Я создал несколько регионов. Во время опроса пользователя просят выбрать местоположение. Это здорово, но я хотел бы спросить, выбрали ли они правильное местоположение.
Вариант 1: Используйте JavaScript, чтобы прослушать событие клика на странице, и выскочит подсказку(с параметрами: ok // отмена), подтверждающие их выбор. Если они нажимают «ОК», опрос переходит на следующую страницу. Если Отмена, то текущий выбор (ы) отменен или страница перезагружается, и ничего не выбрано. Я нашел некоторый код Как создать всплывающее окно в Qualtrics Survey Question , чтобы сделать окно подсказки в качестве отправной точки (см. Ниже). Однако у меня есть две проблемы:
1) Я не могу получить значение местоположения (оно говорит, что неопознано) 2) Я не знаю, как сбросить страницу / вопрос, чтобы ни один элемент не был выбран.
Вариант 2: Позвольте пользователю выбрать местоположение (я ограничил его 1 местоположением в настройках горячей точки). На следующей странице (т.е. вопрос) я могу использовать текст по трубопроводу, чтобы узнать, какой элемент был выбран ${q://QID25/ChoiceGroup/SelectedChoicesForAnswer/2} и могу спросить пользователя, было ли это правильное место. Мне бы хотелось, чтобы какой-нибудь JavaScript прослушивал клик, а затем понимал, был ли выбран Да или Нет. Если да, то перейдите на следующую страницу. Если нет, перейдите на предыдущую страницу. Моя проблема
1) как получить значение Да / Нет 2) как сбросить выборы Горячей точки.
Чтобы помочь, вот небольшая картина горячей точки (размыто намеренно!):
========================================================= Код варианта 1 (любезно предоставлено выше по ссылке) Примечание: яЯ не эксперт по JavaScript, я думаю, что есть некоторые фрагменты кода, которые на самом деле не требуются, но я оставил их, однако, пожалуйста, не стесняйтесь помечать их, чтобы я мог выучить!
Шаг 1: Вставьте следующий код в внешний вид -> расширенный -> добавить пользовательский CSS. Это необходимо для создания дополнительной кнопки, которую можно использовать для вызова сценария.
#CustomButton{
border: none;
color: #fff;
font-size: 16px;
padding: 8px 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
margin: 0;
text-align: center;
text-decoration: none;
-webkit-appearance: none;
transition: background .3s;
background-color: #c32432;
}
Шаг 2: Q25 Вставьте следующий код в js (onload) вопроса, чтобы вызвать подсказкуполе, когда происходит первый щелчок по странице (т. е. этот процесс эффективно нажимает на customButton, который вызывает код js на шаге 3)
Qualtrics.SurveyEngine.addOnload(function()
{
this.questionclick = function(event,element){
$('CustomButton').click();
};
});
Шаг 3: Q25 Вставьте следующий код в js (onready) вопроса, для которого вы хотите, чтобы появился поповер:
Qualtrics.SurveyEngine.addOnReady(function()
{
const that=this;
this.hideNextButton();
var btn = jQuery('<div id="Buttons"><input id="CustomButton" class="NextButton Button" title=" Next " type="button" name="NextButton" value=" Next " aria-label="Next"></div>') //I can add hidden="True" if I wanted to hide this button on the screen.
jQuery('#Buttons').append(btn);
jQuery('#CustomButton').on('click', function(){
var txt;
var e= jQuery("[id='QR~QID25']").val() //<=== need help to retrieve location selected
var r = confirm("You chose this location, please confirm this is correct? "+e);
if (r == true) {
that.clickNextButton();
} else {
//how do I clear the selection(s) / reset the page?
}
});
});
========================================================= Код варианта 2
Шаг 1: Вставить Q25следующий код в js (onload) вопроса для автоматического перехода к следующему вопросу при первом щелчке
Qualtrics.SurveyEngine.addOnload(function()
{
this.questionclick = function(event,element){
$('NextButton').click();
};
});
Следующий вопрос (Q28) предлагает пользователю подтвердить правильность выбора (см. рис.):
Шаг 2: Q28 Вставьте следующий код в js (onReady) вопроса. Примечание. Этот код не является конечным продуктом, но я пытаюсь выработать синтаксис, чтобы сначала получить значение. Код не работает в настоящее время, поскольку он ничего не дает мне в консоли. Я также немного не уверен, правильно ли я идентифицировал личность. Короче говоря, я застрял на получении значения Да / Нет, а также в Варианте 1 застрял на том, как сбросить выбор горячей точки на предыдущей странице.
Исходный источник: Получить выбранныйответ без надобности в пипетке
Qualtrics.SurveyEngine.addOnReady(function()
{
document.getElementById("QR~QID28").onchange = function(element){
//console.log(element); // use console to look at element to find what you need in the question;
var ele_var1=element.target.value.toString(); // gets selected option value from question;
var ele_var=element.currentTarget[ele_var1].Text; // gets text value of selected option;
/*document.getElementById("QR~QID6").value=ele_var; //updates text question;*/
if (var == "Yes") {
that.clickNextButton();
} else {
that.clickPreviousButton();
}
}
});
На скриншоте окна DevTools (см. Рис. Ниже) я показал, что выбрал «ДА», но не думаю, что код вытягивает ответ. Это - то, где мое отсутствие знания HTML и JS останавливает меня, поэтому буду признателен за некоторую помощь.
Если вы добрались до сути этого вопроса- Большое спасибо за чтение - и еще больше спасибо, если вы можете ответить и дать мне несколько советов! :)
Спасибо
Удочка