🏷️Suffixes and prefixes

Convert an open text label into a suffix or prefix

If you already use Numeric validation in the open text, you must add this code first. Otherwise, it won't work.

This code has been tested to be fully compatible with it.

Create your open text question and set a custom label.

Fig 1. Adding an open text and settip up the label

Copy and paste the following code into the Javascript editor within the page.

Fig 2. Copying and paste the code below this image into the Javascript editor.

function add_label({question_code, type = "suffix"} = {}) {
	label = document.querySelector("#q_" + question_code + "_card > label");
	label_text = label.innerText;
	label.remove();

	input = document.querySelector("#p_" + question_code + "_1");
	container = document.querySelector("#q_" + question_code + "_card");

	if (type == "suffix") {
		wrapper = `
			<div class="input-group">
				` + input.outerHTML + `
				<div class="input-group-append">
					<span class="input-group-text" style="margin-top: 15px">` + label_text + `</span>
				</div>
			</div>
		`
	} else if (type == "prefix") {
		wrapper = `
		<div class="input-group">
			<div class="input-group-prepend">
				<span class="input-group-text" style="margin-top: 15px">` + label_text + `</span>
			</div>
			` + input.outerHTML + `
		</div>
		`
	}

	input.remove();
	container.innerHTML += wrapper;
}

/* Change this part of the code with your parameters */
add_label({
	question_code : "Q1", 
	type : "prefix"
});

How to use it...

Then, you will need to change this part of the code with your actual parameters.

question code is the code of your open text.

type is the modifier that allows you to specify whether the label should be converted to prefix or suffix.

add_label({
	question_code : "Q1", 
	type : "prefix"
});

Once done, you should save changes by clicking the save button in the Javascript editor.

Variables

Variable name	Description	Example
question_code	The name of the open text where you want to convert it's label as prefix or suffix.	add_label({ question_code : "Q1", type : "prefix" });
type	The type of label you want. It can be prefix or suffix. if type is not defined, the default value will be suffix.	add_label({ question_code : "Q1", type : "prefix" }); /* OR */ add_label({ question_code : "Q1", type : "suffix" });

Examples

The label you have just modified will go from looking like this:

Fig 3. Default layout of labels in open text questions

To look like this when the label is converted to a prefix

add_label({
	question_code : "Q1", 
	type : "prefix"
});

Fig 4. Converting a label to prefix

or to this other design, in case it has been converted to a suffix.

add_label({
	question_code : "Q1", 
	type : "suffix"
});

Fig 5. Converting a label to suffix