Dynamically showing score depending on the number of "On" Hot Spot Regions

Hi there,
I am very new to JS and made great progress in understanding my problem by parsing throught the posts of this wholesome community, but still got stuck in coming up with a (working) solution. I thus resolved to adding a post of my own in case some benefactor could help alleviate my woes.
Here is my problem : I am setting up a task in which I want participants to activate/deactive Regions in a Hot Spot question. So far, so good.
However, I also want to display a point tally on the same page, that is dynamically updated as a function of the number of "On" regions in the Hot Spot. Thus, my problems are :
1) How to dynamically get the number of On Regions of a Hot Spot Questions on the same page & in real time
2) How to calculate a score depending on the number of "On" regions ?
3) How to display this score ?
1) I luckily found some similar questions on the forum, e.g https://community.qualtrics.com/XMcommunity/discussion/9626/how-to-display-choice-count-dynamically-in-question-text-for-likert-single-answer-question-type
It seems that the HotSpot question might make it a little bit more complicated though. Here is what I found for checkboxes :
varQID = this.questionId ;
jQuery("#"+ QID + " input[type='checkbox']").on("click", function() {
jQuery('#chkcount').text(jQuery("#"+ QID + " td.c4 input[type='checkbox']:checked").length);
});
...and what I came up with, which is obviously wrong :
var QID = this.questionId ;
jQuery("#" + QID + ".HotSpotContainer").on("click", function() {
var s = jQuery("#" + QID + ".HotSpotContainer:On").length; jQuery('#chkcount').text(s);
Qualtrics.SurveyEngine.setEmbeddedData("Count", s);
});
Unfortunately, I could not find any ressources to help me understanding how to manipulate Hot Spot questions and its content (:On won't work I guess). The only ressource I found was this : https://community.qualtrics.com/XMcommunity/discussion/11077/is-there-a-way-to-use-the-js-methods-to-access-the-region-on-off-data-within-a-hot-spot-image (summary : use getAttributeNS) but could not find how to so.
2) Calculating score : Would simply adding this work ?
var OnScores = {"1": -500, "2": -800, "3": -1000}; //3 regions by example
var QID = this.questionId ;
jQuery("#" + QID + ".HotSpotContainer").on("click", function() {
var s = jQuery("#" + QID + ".HotSpotContainer:On").length;
jQuery('#chkcount').text(s);
Qualtrics.SurveyEngine.setEmbeddedData("Count", s);
var Score = OnScore[Count];
Qualtrics.SurveyEngine.setEmbeddedData("Point",Score);
});
3) ...and then display the score by simply adding in a text description HTLM on the same block/page
Your current score is ${e://Field/Score}
I would be very thankful for any help !