🧠Commonly used selectors

Learn how to make query selectors to interact with questions inside Syno Survey

Understanding the layout

First of all, you can either interact with the containers that holds the answers or inputs inside them. Depeding of your case of use, you might need one or another.

Interactive queries to User Interface

Get question cards

Every single question inside Syno Survey is wrapped in a div element with a classname.question

You can get all the available questions card using the following CSS query selector

let questions = Array.from(document.querySelectorAll(".question"));

Get a specific question card

let question_code = "Q1";
let question_card = document.querySelector(`#q_${question_code}_card`);

Get all radio buttons inside a question card

/* Get question card before querying it */
question_card.querySelectorAll(".form-check > input[type='radio']")

Get all checkboxes inside a question card

/* Get question card before querying it */
question_card.querySelectorAll(".form-check > input[type='checkbox']")

Get all radio buttons inside a matrix

/* Get question card before querying it */
question_card.querySelectorAll(".form-check > input[type='radio']")

Get all radio buttons inside a question card

/* Get question card before querying it */
question_card.querySelectorAll(".form-check > input[type='radio']")

// This will give you all the boxes that contains the answers
answer_containers = document.querySelectorAll(".form-check");

The code of above doesn't let you interact with the answers directly. If you need to click or check an answer, you will need to get the inputs inside those containers. One simple way to to this, is by getting all the inputs available in the current page. Use this snippet to do it:

// This will give you all the available inputs to let you interact to them
available_inputs = document.querySelectorAll(".form-check > input");

The code above will give you an array of DOM elements, so you need to consider that every array at Javascript starts with 0. If you want to, for example, click the first radio button, you will need to do this:

// Click the nth element of the array

// This will click the first element of the array
available_inputs[0].click();

// This will click the last element of the array, no matter it's length
available_inputs[available_input.length-1].click()

If you are using a code to convert radio buttons to dropdown or multiple select to multidropdown, this code will also allow you to retreive that information.

Open ended questions

For the case of open answer, we need to use a different selector. To get all the available open ended questions you will need to use the following code

// Get all the free answers in the page
// This will return an array of DOM elements
open_ended_answers = document.querySelectorAll(".custom-text");

// To write a text in the first open ended
open_ended_answers[0].value = "Your custom text here";

// To retreive the text of the first open ended 
open_ended_answers[0].value

Matrices