I want to be able to create a multiple checkbox poll for the first step (STEP 1) of the "pendo guide" and a radio button poll for the next step (STEP 2)
Here some question examples from the poll:
STEP 1
[Q is required to answer to move to step 2]
Q: Which communication or collaboration software do you use? [select all that apply]
((The user would be able to select multiple options from the list below))
- Slack
- Google Chat
- Microsoft Teams
- Zoom
- None of the above
STEP 2
[Q is required to answer to move to submit the poll]
Q: How much time daily are you on your mobile? [select one]
((The user would be able to select only 1 option from the list below))
- 2-4 hours
- 4-6 hours
- 6-9 hours
- 9-12 hours
- 12-16 hours
----------------
Thanks for your help!
I was triying to edit the code in html [Pendo Guide - Edit Code ](https://i.stack.imgur.com/lW1GQ.png)
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Multi-Select Checkbox Poll</title>
<script src="https://cdn.pendo.io/agent/static/<YOUR_PENDO_TRACKING_ID>/pendo.js"></script>
<style>
.pollContainer {
font-size: 14px;
color: rgb(17, 17, 17);
font-weight: 400;
position: relative;
float: none;
vertical-align: baseline;
margin: 0px 0px 8px;
padding: 0px;
font-size: 13px;
letter-spacing: 0px;
line-height: 1.5;
overflow-wrap: break-word;
text-transform: none;
font-family: Helvetica;
text-decoration: none;
text-align: left;
}
h2, h3 {
color: rgb(83, 82, 82);
font-weight: 200;
position: relative;
float: none;
vertical-align: baseline;
margin: 0px 0px 8px;
padding: 0px;
font-size: 14px;
letter-spacing: 0px;
line-height: 1.5;
overflow-wrap: break-word;
text-transform: none;
font-family: Helvetica;
text-decoration: none;
text-align: left;
}
input[type="checkbox"], button {
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="pollContainer" id="question1Container">
<h3>1. Which communication or collaboration software do you use? ? Select all that apply.</h3>
<input type="checkbox" name="option" value="Slack" required>Slack<br>
<input type="checkbox" name="option" value="Google Chat" required>Google Chat<br>
<input type="checkbox" name="option" value="Microsoft Teams" required>Microsoft Teams<br>
<input type="checkbox" name="option" value="Zoom" required>ZoomTeams<br>
<input type="checkbox" name="option" value="None of the above" required>None of the above<br>
</div>
<div class="pollContainer" id="question3Container">
<h3>3. How much time daily are you on your mobile? select one.</h3>
<input type="checkbox" name="option" value="2-4 hours" required>2-4 hours<br>
<input type="checkbox" name="option" value="4-6 hours" required>4-6 hours t<br>
<input type="checkbox" name="option" value="6-9 hours" required>6-9 hours<br>
<input type="checkbox" name="option" value="9-12 hours" required>9-12 hours<br>
</div>
here is the Javascript:
var requiredQuestions = [];
var requiredPollIds = [];
var dependentButtons = [];
var textForDisabledButtons = ["Submit", "Next", "Finish"];
var isButtonDisabled = false;
function requiredHTML(dataPendoPollId) {
return '<div class="required-wrapper" name="' + dataPendoPollId + '">* Required</div>';
}
function disableEligibleButtons(textForDisabledButtons) {
for(var i=0; i < textForDisabledButtons.length; i++) {
var eligibleButtons = pendo.dom("._pendo-button:contains('" + textForDisabledButtons[i] + "')");
for (var k=0; k < eligibleButtons.length; k++) {
eligibleButtons[k].disabled = true;
}
}
}
function enableEligibleButtons(textForDisabledButtons) {
for(var i=0; i < textForDisabledButtons.length; i++) {
var eligibleButtons = pendo.dom("._pendo-button:contains('" + textForDisabledButtons[i] + "')");
for (var k=0; k < eligibleButtons.length; k++) {
eligibleButtons[k].disabled = false;
}
}
}
if(!pendo.designerEnabled) {
function processRequiredQuestions() {
requiredQuestions = pendo.dom("._pendo-open-text-poll-question:contains('[REQUIRED]'), ._pendo-number-scale-poll-question:contains('[REQUIRED]'), ._pendo-multi-choice-poll-question:contains('[REQUIRED]')");
for(i=0; i<requiredQuestions.length; i++) {
var dataPendoPollId = requiredQuestions[i].getAttribute("data-pendo-poll-id");
requiredPollIds.push(dataPendoPollId);
if(pendo.dom("._pendo-multi-choice-poll-select-border[data-pendo-poll-id='" + requiredPollIds[i] + "']")[0]) {
pendo.dom("._pendo-multi-choice-poll-select-border[data-pendo-poll-id='" + requiredPollIds[i] + "']")[0].parentElement.parentElement.insertAdjacentHTML('afterEnd', requiredHTML(dataPendoPollId));
} else {
pendo.dom(".pendo-block-wrapper[data-pendo-poll-id='" + dataPendoPollId + "']")[0].parentElement.parentElement.insertAdjacentHTML('afterEnd', requiredHTML(dataPendoPollId));
}
requiredQuestions[i].innerHTML = requiredQuestions[i].innerHTML.replace("[REQUIRED]", "");
}
if(requiredPollIds.length>0) {
disableEligibleButtons(textForDisabledButtons);
}
}
function evaluateRequiredQuestions() {
var allRequiredComplete = true;
for(var i = 0; i < requiredPollIds.length; i++) {
if (pendo.dom("._pendo-open-text-poll-wrapper[data-pendo-poll-id='" + requiredPollIds[i] + "']")[0]) {
if(pendo.dom("._pendo-open-text-poll-wrapper[data-pendo-poll-id='" + requiredPollIds[i] + "'] textarea")[0].value == "") {
var allRequiredComplete = false;
}
}
if (pendo.dom("._pendo-number-scale-poll-wrapper[data-pendo-poll-id='" + requiredPollIds[i] + "']")[0]) {
if(!(pendo.dom("._pendo-number-scale-poll-wrapper[data-pendo-poll-id='" + requiredPollIds[i] + "']")[0].querySelector(':checked'))) {
var allRequiredComplete = false;
}
}
if (pendo.dom("._pendo-multi-choice-poll-select-border[data-pendo-poll-id='" + requiredPollIds[i] + "']")[0]) {
if(!(pendo.dom("._pendo-multi-choice-poll-select-border[data-pendo-poll-id='" + requiredPollIds[i] + "']")[0].querySelector(':checked'))) {
var allRequiredComplete = false;
}
}
}
if (allRequiredComplete) {
enableEligibleButtons(textForDisabledButtons);
} else {
disableEligibleButtons(textForDisabledButtons);
}
}
processRequiredQuestions();
document.querySelectorAll("._pendo-open-text-poll-input").forEach(textbox => {
textbox.addEventListener("input", function() {
evaluateRequiredQuestions();
})
})
pendo.dom("#pendo-guide-container")[0].addEventListener("click", function(){
if(!event.target.classList.contains("_pendo-button")) {
evaluateRequiredQuestions();
}
});
}
if(pendo.designerEnabled) {
addRequiredMutationListener = function() {
var target = document.querySelector('#pendo-guide-container');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
// Add requiredToggle if new Open Text Poll is added
if(mutation.addedNodes[0].querySelector("._pendo-open-text-poll-wrapper, ._pendo-number-scale-poll-wrapper, ._pendo-multi-choice-poll-select-border")) {
var dataPendoPollId = "";
if(mutation.addedNodes[0].querySelector("._pendo-open-text-poll-wrapper, ._pendo-number-scale-poll-wrapper")) {
var dataPendoPollId = mutation.addedNodes[0].querySelector("form").getAttribute("name");
} else {
var dataPendoPollId = mutation.addedNodes[0].querySelector("._pendo-multi-choice-poll-select-border").getAttribute("data-pendo-poll-id");
}
var questionText = "";
if(pendo.dom("._pendo-open-text-poll-question[data-pendo-poll-id=" + dataPendoPollId + "]")[0]) {
questionText = pendo.dom("._pendo-open-text-poll-question[data-pendo-poll-id=" + dataPendoPollId + "]")[0].textContent;
}
if(pendo.dom("._pendo-number-scale-poll-question[data-pendo-poll-id=" + dataPendoPollId + "]")[0]) {
questionText = pendo.dom("._pendo-number-scale-poll-question[data-pendo-poll-id=" + dataPendoPollId + "]")[0].textContent;
}
if(pendo.dom("._pendo-multi-choice-poll-question[data-pendo-poll-id=" + dataPendoPollId + "]")[0]) {
questionText = pendo.dom("._pendo-multi-choice-poll-question[data-pendo-poll-id=" + dataPendoPollId + "]")[0].textContent;
}
if(questionText.includes("[REQUIRED]")){
mutation.addedNodes[0].insertAdjacentHTML('afterEnd', requiredHTML(dataPendoPollId));
if(requiredQuestions.includes(dataPendoPollId)) {
var index = requiredQuestions.indexOf(dataPendoPollId);
if (index !== -1) {
requiredQuestions.splice(index, 1);
}
} else {
requiredQuestions.push(dataPendoPollId);
}
} else {
if(requiredQuestions.includes(dataPendoPollId)) {
var index = requiredQuestions.indexOf(dataPendoPollId);
if (index !== -1) {
requiredQuestions.splice(index, 1);
}
}
}
}
var allRequiredComplete = true;
for(var i = 0; i < requiredQuestions.length; i++) {
if (pendo.dom("._pendo-open-text-poll-wrapper[data-pendo-poll-id='" + requiredQuestions[i] + "']")[0]) {
if(pendo.dom("._pendo-open-text-poll-wrapper[data-pendo-poll-id='" + requiredQuestions[i] + "'] textarea")[0].value == "") {
var allRequiredComplete = false;
}
}
if (pendo.dom("._pendo-number-scale-poll-wrapper[data-pendo-poll-id='" + requiredQuestions[i] + "']")[0]) {
if(!(pendo.dom("._pendo-number-scale-poll-wrapper[data-pendo-poll-id='" + requiredQuestions[i] + "']")[0].querySelector(':checked'))) {
var allRequiredComplete = false;
}
}
if (pendo.dom("._pendo-multi-choice-poll-select-border[data-pendo-poll-id='" + requiredQuestions[i] + "']")[0]) {
if(!(pendo.dom("._pendo-multi-choice-poll-select-border[data-pendo-poll-id='" + requiredQuestions[i] + "']")[0].querySelector(':checked'))) {
var allRequiredComplete = false;
}
}
}
if (allRequiredComplete) {
enableEligibleButtons(textForDisabledButtons);
} else {
disableEligibleButtons(textForDisabledButtons);
}
}
})
});
var config = {
attributeFilter: ['data-layout'],
attributes: true,
childList: true,
characterData: true,
subtree: false
};
observer.observe(target, config);
}
addRequiredMutationListener();
}