From 6d7752b5c1ab42fc614f83ffbb7cea3c9282e51f Mon Sep 17 00:00:00 2001
From: azanbinzahid <azan.zahid@arbisoft.com>
Date: Fri, 11 Dec 2020 15:52:21 +0500
Subject: [PATCH] PROD-2212

---
 .../static/js/capa/drag_and_drop/targets.js   | 56 +++++++++----------
 1 file changed, 26 insertions(+), 30 deletions(-)

diff --git a/common/static/js/capa/drag_and_drop/targets.js b/common/static/js/capa/drag_and_drop/targets.js
index ffbf47f1e8..a6787d3d5d 100644
--- a/common/static/js/capa/drag_and_drop/targets.js
+++ b/common/static/js/capa/drag_and_drop/targets.js
@@ -1,5 +1,5 @@
 (function(requirejs, require, define) {
-    define([], function() {
+    define(['edx-ui-toolkit/js/utils/html-utils'], function(HtmlUtils) {
         return {
             initializeBaseTargets: initializeBaseTargets,
             initializeTargetField: initializeTargetField,
@@ -76,17 +76,19 @@
             }
 
             $targetEl = $(
-            '<div ' +
-                'style=" ' +
-                    'display: block; ' +
-                    'position: absolute; ' +
-                    'width: ' + obj.w + 'px; ' +
-                    'height: ' + obj.h + 'px; ' +
-                    'top: ' + obj.y + 'px; ' +
-                    'left: ' + obj.x + 'px; ' +
-                    borderCss +
-                '" ' +
-            'aria-dropeffect=""></div>'
+                HtmlUtils.joinHtml(
+                    HtmlUtils.HTML('<div style="display: block; position: absolute; width: '),
+                    obj.w,
+                    HtmlUtils.HTML('px; height: '),
+                    obj.h,
+                    HtmlUtils.HTML('px; top: '),
+                    obj.y,
+                    HtmlUtils.HTML('px; left: '),
+                    obj.x,
+                    HtmlUtils.HTML('px; '),
+                    borderCss,
+                    HtmlUtils.HTML('"aria-dropeffect=""></div>')
+                ).toString()
         );
             if (fromTargetField === true) {
                 $targetEl.appendTo(draggableObj.iconEl);
@@ -100,23 +102,17 @@
 
             if (state.config.onePerTarget === false) {
                 $numTextEl = $(
-                '<div ' +
-                    'style=" ' +
-                        'display: block; ' +
-                        'position: absolute; ' +
-                        'width: 24px; ' +
-                        'height: 24px; ' +
-                        'top: ' + obj.y + 'px; ' +
-                        'left: ' + (obj.x + obj.w - 24) + 'px; ' +
-                        'border: 1px solid black; ' +
-                        'text-align: center; ' +
-                        'z-index: 500; ' +
-                        'background-color: white; ' +
-                        'font-size: 0.95em; ' +
-                        'color: #009fe2; ' +
-                    '" ' +
-                '>0</div>'
-            );
+                    HtmlUtils.joinHtml(
+                        HtmlUtils.HTML('<div style=" display: block; position: absolute;'),
+                        HtmlUtils.HTML('width: 24px; height: 24px; top: '),
+                        obj.y,
+                        HtmlUtils.HTML('px; left: '),
+                        obj.x,
+                        obj.w - 24,
+                        HtmlUtils.HTML('px; border: 1px solid black; text-align: center; z-index: 500;'),
+                        HtmlUtils.HTML('background-color: white; font-size: 0.95em; color: #009fe2; ">0</div>')
+                    ).toString()
+                );
             } else {
                 $numTextEl = null;
             }
@@ -263,7 +259,7 @@
 
         function updateNumTextEl() {
             if (this.numTextEl !== null) {
-                this.numTextEl.html(this.draggableList.length);
+                this.numTextEl.text(this.draggableList.length);
             }
         }
     }); // End-of: define([], function () {