Allowing users to enter in custom made classes and/or IDs for the various elements they design into a form. A beta version could have users have to acknowledge the risks of doing such (and maybe even have to switch off a default safe mode), but this then activated two fields at the bottom of every design panel which showed the default class/ID --where one existed–with the option to rename it.
2 Likes
Interesting thought, thanks for sharing! If this idea becomes popular, we’ll try to think it over in the future updates 
3 posts were split to a new topic: External JavaScript File Referencing
I think I might be able to run javascript in the embedding document (www.UFPA.ca/burnout3) which the ElfSight form (that is also embedded in said page) may be able to access anyway.
Also, I stumbled upon a routine that I think will allow me to capture various elements in the form, and assign classes and IDs to them. I’ve tested it and it works. But it alters the HTML of the form itself (or I think it does). So, I was hoping to get an OK from the developers before I implement it, on the off chance that this may cause chaos for ElfSight.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testing grabbing unidentifiable divs and giving them unique selectors</title>
</head>
<body>
<div>
00001 This div has nothing special except a number 00001 and a symbol ****
</div>
<div>
00002 This div has nothing special except a number 00002 and a symbol $$$$
</div>
<div>
00003 This div has nothing special except a number 00003 and a symbol %%%%
</div>
<div>
00004 This div has nothing special except a number 00004 and a symbol &&&&
</div>
</body>
</html>
<script>
function contains(selector, text) {
var elements = document.querySelectorAll(selector);
return Array.prototype.filter.call(elements, function (element) {
return RegExp(text).test(element.textContent);
});
}
let itisFound = contains("div", "&&&&"); // find "div" that contain "&&&&"
let itisFixed = itisFound[0];
console.log(itisFixed.innerText);
itisFixed.setAttribute("class", "FirstFixedDiv");
let itisShown = document.querySelector(".FirstFixedDiv");
itisShown.innerText = "We have changed the HTML document with Javascript!";
console.log(itisFound[0].innerText);
console.log(itisShown.innerText);
</script>
2 Likes
Our devs have reviewed the code and it needs a few adjustments to function correctly. We’ll be happy to assist you with it
Could you just answer some questions:
-
Would you like to change or add new classes/IDs?
-
Do you need to change classes of all widget’s elements or just the specific ones?
-
Would you like to change/add just classes, or both classes and IDs?
This info would help us create a relevant code for your use case
1 Like
Oh wow…you guys continue to be beyond awesome.
I don’t think I need to edit classes or IDs (I don’t think the Elf-Sight form even uses IDs?). But I would need to add classes AND IDs. I would like to have the ability to choose many elements and assign them classes and IDs, as necessary.
I would want this function to search the form, after loadup I guess, for specific strings and then add classes and IDs accordingly.
For instance, if you look at the form I am working on, step 6 has a Label: “Section A: Emotional Exhaustion”. Below that is a paragraph: " UfPa-ID-Text-MBIR1". I would want this function to
- find that by searching for “UfPa” (which won’t be used anywhere else except to assign selectors), then
- determine that an ID is to be assigned (ID, vs CL for class…both are 2 characters long), and that
- it is to be assigned to either the text/label element (Txt) or the choice element (Box) (both are 3 characters long) and that
- the value to be assigned to that selector is “MBIR01” (this could be any reasonable length…but if the developers want to lock it into a specific format, I could live with 4 characters and 2 number digits)
Thus, in the end, the assignment of IDs and Classes would be driven by how I labelled things in the HTML aspect of the form itself. To address a concern with #3 above…that is a Christmas gift to me. I presume that might be an easy thing to do, but I don’t know. If the developers think that is too big of a wish, I can exclude it and keep my ambitions to the text labels themselves. My impression is that most of the control elements (boxes, buttons) have workable unique selectors attached to them.
Again thank you for going beyond my expectations. I almost feel like I am taking unfair advantage of you all at this point. When this is all done, I will send you a pizza if the staff isn’t too big LOL.
Cheers
John
Another example comes from my form, Step 5, where the first drop down has a hidden label “UfPa-CL-Box-C”.
I would want the routine to find that (UfPa), determine I want to assign a class (CL), to the dropdown box itself (Box), and have that class be named “Working Conditions and Pay.”
typo…the hidden label has “UfPa-CL-Box-Working Conditions and Pay.”
Sorry for the string of emails.
As a final insight to this…the reason for wanting to give these HTML elements classes and IDs is so that I can dynamically alter their contents on the fly. Coming back to Step 6, and Step 4. When the user is done with step 4, I now have the form calculating their MBI score. Then when they enter step 6, I want to be able to take that MBI score, and use it to offer the user a customized interpretation of their results. So, I capture the MBI score, determine that they are at moderate risk for emotional exhaustion, and replace the “UfPa-ID-Text-MBIR1” text with a paragraph that mirrors back to them how they are likely feeling, what risks they are incurring, and what can be done about it. I will be able to do that because at the time of loadup the JS script already found these fields, assigned them IDs and Classes and now the non-sense text can be replaced with meaningful content.
OK, one last email. If you guys make this super easy for me, I am willing to pay for that. Especially if it happens over this weekend.
Things I have left to do:
Step 2:
a) Integrate a code block that uses the name and college number of all the family doctors in my province as a validation step. If they can’t match their name to their college registration number, they can’t get past Step 2. I have this code already working on another page: https://www.abfamdocs.com/tester.
But there are many doctors with nearly the same name in my province, so I would want the user to be able to see into how their entries compare to the database, by clicking " Click here to pre-validate your data"
b) I would also want to capture IP addresses, to whatever possibility that is. And a time-reading of when this person entered Step 2.
Step 3:
a) I have a box “What is your majority practice style/setting?”, that pulls down and gives an “other” option. If the user selects that I would want a prompt box to open that allows them to describe what their circumstance is.
b) I have a box “If your practice is diversified, what percentage is your majority practice style/setting?” I would want that limited to only allowing numeric content, between 0 and 100.
c) I have a box “What is your pay model for your majority style/setting?” that also pulls down to an “other” option. The same thing, if that gets selected, it creates a prompt box to get clarification.
Step 4) I have already figured out how to score the values when the person leaves step 4.
Step 5) I would want it so that the user can only have one “This is my top concern” selected across the step. At the bottom of step 5 I would want a dynamic update of what the user has declared as their “top concern” and any “priority concerns” they have declared. This would replace the text: “UfPa-ID-Txt-StressorRankSummary”.
Step 6) When the time comes to submit, I would like to have this dump all this information to a google sheet, 1 row per submission. Along with IP address, timestamps of when they entered step 2, and also when they submitted. Most of this data could be entered into the google sheet the same order it presented in the forms. The Maslach scores would be ideally stored as a) the score of each question, b) score of the individual 3 sections, c) the total overall score. I would also like an opportunity to ask the user if they want a copy of the results sent to their email address, and have an email sent to my email address notifying me that a submission has been made.
Future directions:
-
Once this is up and running, then I would like to streamline this into a code set that can be recycled into other forms. With the features of:
a) setting the Classes/IDs
b) toggling tool-tips (and even having the form access a google-sheet to capture those tool-tip blurbs
c) validate user IDs
d) scoring a questionnaire on the fly and offering dynamic feedback on the results (through capturing pre-written interpretations from a google-sheet -step6-, or through just listing what has been selected -step5-) -
Make it so that people could pull up their old responses (Loaded into the fields) in order to compare how they are doing now vs then. Hopefully, the things we are going to do as an organization will make things better for docs in the province, and maybe we will get evidence of that.
-
I could even see a need for maybe taking users down different forms based on their answers. Seeing step 2, maybe if they person says they are “Yes, I am a physician, currently practicing in Alberta, not a family doctor.”, maybe we take them down the path of a questionnaire specific to surgeons or internal-medicine doctors, if they state they are family doctors from other parts of Canada we send them to the physician group in their province instead of us.
If this works out, Elf-Sight might be able to get some sort of licensing deal with other medical associations across the country, and that might be lucrative. I am hoping you guys would keep my rate cheap though as I am merely an individual doctor (who formed a ragtag group of other doctors -UFPA). But the medical associations would probably consider this to be worth gold. Especially because they are watching my actions to see if my plan is successful.
Further, like I said earlier, I am willing to pay your developer(s) for this either through Elf-Sight, or as a moonlighting gig, especially if this comes together this weekend (Not the future directions, that is too much LOL). And, all of this might be going into a research project if I can make this fly and entice burned out doctors to participate. In that case, the developer(s) that help me can likely get their names into medical research publications.
Sorry for this ridiculous email. But your developers seem awesome, and so I took a chance to see if they were willing/capable of helping me lift all this weight. I think I am doing well with the learning-to-code effort…but the weight is getting heavy on me.
Cheers
John
Hi there, @John_Gudgeon 
Thank you so much for sharing the details!
As for the points mentioned in your last comment:
Step 2:
a) Could you please describe where the info about doctors should be pulled from to complete validation? What should happen after clicking on “Pre-validate your data”? Users will be redirected to the database with the doctors, then compare their name and if everything is correct click Check Name in the form, right?
b) Unfortunately, it’s impossible to pull the info about IPs. You can upvote this idea on the Wishlist - Users IP adress in the email. As for the time reading, I’ll discuss it with the devs.
Step 3:
a,c) You can do it with the conditional logic feature. To do this, please follow these steps:
Step 5:
Right now, you have multiple options for Dropdown fields, but would like to keep only This is my top/priority concerns options.
So, some dropdowns can be left empty, but if users choose Top or Priority concern field the name of the dropdowns should replace UfPa-ID-Txt-StressorRankSummary, Am I right?
Step 6:
The submissions are displayed in spreadsheets in 1 line and the form fields are displayed in the same order as in the widget by default.
However, I don’t quite understand how you are going to get the MBI scores. Could you please provide more details on how this should be handled?
1 Like
Hold off on any further development for a couple days…I may have gotten most of the problems solved.
Cheers
John
1 Like