﻿{"id":814,"date":"2021-07-15T13:34:03","date_gmt":"2021-07-15T13:34:03","guid":{"rendered":"https:\/\/dermatology.upenn.edu\/compderm\/?page_id=814"},"modified":"2021-07-26T16:39:54","modified_gmt":"2021-07-26T16:39:54","slug":"acne-2","status":"publish","type":"page","link":"https:\/\/dermatology.upenn.edu\/codelab\/projects\/acne-2\/","title":{"rendered":"A Multidimensional Acne Global Grading System Integrating Primary Lesions and Secondary Changes"},"content":{"rendered":"<div   class='hr hr-default   avia-builder-el-0  el_before_av_textblock  avia-builder-el-first '><span class='hr-inner ' ><span class='hr-inner-style'><\/span><\/span><\/div>\n<section class=\"av_textblock_section \"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/CreativeWork\" ><div class='avia_textblock  '   itemprop=\"text\" ><h2><strong>A Multidimensional Acne Global Grading System<\/strong><\/h2>\n<\/div><\/section>\n<section class=\"av_textblock_section \"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/CreativeWork\" ><div class='avia_textblock  '   itemprop=\"text\" ><!-- wp:image {\"align\":\"center\",\"id\":231,\"width\":512,\"height\":335,\"sizeSlug\":\"large\"} -->\r\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/dermatology.upenn.edu\/codelab\/wp-content\/uploads\/sites\/12\/2021\/07\/Encoding-Clinicians-1.png\" alt=\"Encoding Clinicians\" class=\"wp-image-231\" width=\"512\" height=\"335\"\/><\/figure><\/div>\r\n<!-- \/wp:image -->\r\n\r\n<!-- wp:heading {\"level\":4} -->\r\n<h4>Introduction<\/h4>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph -->\r\n<p>Accurate and reproducible acne assessment is a challenging task. While dozens of severity scales exist, most focus exclusively either on lesion counting or on evidence of scarring. An optimal grading system should ideally model how dermatologists are able to rapidly form an opinion on the acne state. By analyzing how dermatologists evaluate acne in the clinic, we first created a multidimensional acne severity space and then reduced it to a more intuitive scale that can be used for clinical and research use, linking acne\u2019s visual features to a severity that reflects primary lesions as well as overall acne activity, and in particular scarring.<\/p>\r\n<!-- \/wp:paragraph -->\r\n\r\n<!-- wp:heading {\"level\":4} -->\r\n<h4>Goal<\/h4>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph -->\r\n<p>Create an acne grading system to provide, upon a visual inspection only of an acne affected skin area, a severity level that may serve as an entry point for treatment.<\/p>\r\n<!-- \/wp:paragraph -->\r\n<p><em>The electronic form below allows you to try out the multidimensional acne scale presented in the paper. Anyone can use it to assess acne from a visual inspection as long as they are familiar with the basic definitions of acne lesions and how they appear (here is a <a href=\"https:\/\/www.aad.org\/public\/diseases\/acne\/really-acne\/symptoms\" target=\"_blank\" rel=\"noopener\">quick overview of primary lesions<\/a> from the AAD). Please note that the scale should be used as explained in the manuscript and is only meant for a non-commercial use. We also ask that you cite the paper below if you use the scale for any research purposes.<\/em> <\/p><br>\r\n<!-- wp:code -->\r\n<pre class=\"wp-block-code\"><code><style>\r\n\r\n\r\n.App-logo {\r\n  height: 40vmin;\r\n  pointer-events: none;\r\n}\r\n\r\n@media (prefers-reduced-motion: no-preference) {\r\n  .App-logo {\r\n    animation: App-logo-spin infinite 20s linear;\r\n  }\r\n}\r\nlabel{\r\n  margin: auto;\r\n  display: block;\r\n  width: 50%;\r\n  font-size:  1.25rem;\r\n  font-weight: 200;\r\n}\r\n\/* Clear floats after the columns *\/\r\n.column {\r\n  float: left;\r\n  width: 50%;\r\n  margin: auto;\r\n}\r\n.row:after {\r\n  content: \"\";\r\n  display: table;\r\n  clear: both;\r\n}.App {\r\n  background-color: white;\r\n  font-size: calc(10px + 2vmin);\r\n  color: black;\r\n}\r\n\r\n.App-link {\r\n  color: #61dafb;\r\n}\r\n\r\n.form-control {\r\n  margin: auto;\r\n  display: block;\r\n  width: 50%;\r\n  height: 8rem !important;\r\n  font-size: 1rem;\r\n  line-height: 1.5;\r\n  color: #495057;\r\n  background-color: #fff;\r\n  background-clip: padding-box;\r\n  border: 1px solid transparent;\r\n  border-radius: .5rem;\r\n  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;\r\n}  \r\nh1{\r\n  text-align: center;\r\n  margin-left: 20%;\r\n  margin-right: 20%;\r\n}\r\nh2{\r\n  text-align: center;\r\n}\r\n<\/style><\/code><\/pre>\r\n<!-- \/wp:code -->\r\n\r\n<!-- wp:paragraph -->\r\n<p><\/p>\r\n<!-- \/wp:paragraph -->\r\n\r\n\r\n\r\n<!-- wp:heading {\"level\":4} -->\r\n\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:code -->\r\n<pre class=\"wp-block-code\"><code><div id=\"App\"><\/div><\/code><\/pre>\r\n<!-- \/wp:code -->\r\n\r\n<!-- wp:shortcode \/-->\r\n\r\n<!-- wp:paragraph -->\r\n<p><strong>References:<\/strong> Bernardis E, Shou S, Barbieri, McMahon PJ, Perman, MJ, Rola LA, Streicher JL, Treat JR, Castelo-Soccio L, Yan AC, Development and Initial Validation of a Multidimensional Acne Global Grading System Integrating Primary Lesions and Secondary Changes, JAMA Dermatology, Jan. 2020. <a href=\"http:\/\/add_on_wed\">[<\/a><a href=\"https:\/\/jamanetwork.com\/journals\/jamadermatology\/fullarticle\/2759750\">paper<\/a><a href=\"http:\/\/add_on_wed\">]<\/a><\/p>\r\n<!-- \/wp:paragraph -->\r\n\r\n<!-- wp:paragraph -->\r\n<p><strong>Acknowledgments:<\/strong> Thanks to the Penn Libraries' Biomedical Library&nbsp;and the Library's Innovation Intern, James Bigbee, for the implementation of the severity scale interface.<\/p>\r\n<!-- \/wp:paragraph -->\r\n\r\n<!-- wp:code -->\r\n<pre class=\"wp-block-code\"><code><script>\r\nvar nodulesData = {\r\n    id: 'nod',\r\n    label: '#Nodules',\r\n    options: ['1. none','2. one','3. few (2-3)','4. some (4-6)', '5. many (6+)'],\r\n}\r\nvar papulesData = {\r\n    id: 'pap',\r\n    label: '#Papules\/Pustules',\r\n    options: ['1. none','2. few (1-3)','3. some (4-8)','4. many (8+)', '5. covered'],\r\n}\r\nvar comedonesData = {\r\n    id: 'com',\r\n    label: '#Comedones',\r\n    options: ['1. none','2. few (1-3)','3. some (4-12)','4. many (12+)', '5. covered'],\r\n}\r\nvar scarsData = {\r\n    id: 'sca',\r\n    label: 'Scars',\r\n    options: ['1. none','2. mild\/mod','3. severe'],\r\n}\r\nvar inflammationData = {\r\n    id: 'inf',\r\n    label: 'Inflammation',\r\n    options: ['1. none','2. mild\/mod','3. severe'],\r\n}\r\nvar posData = {\r\n    id: 'pos',\r\n    label: 'Post-Inflam',\r\n    options: ['1. no','2. yes'],\r\n}\r\nvar chart = [\r\n    [0, 1, 3, 3, 4, 5, 6, 7],\r\n    [1, 2, 3, 3, 4, 5, 6, 7],\r\n    [2, 2, 3, 4, 5, 6, 7, 8],\r\n    [4, 4, 4, 5, 6, 7, 8, 9],\r\n    [5, 5, 5, 6, 7, 8, 9, 9]\r\n];\r\nvar scale = [\r\n    \"Clear\",\r\n    \"Almost Clear\",\r\n    \"Mild\",\r\n    \"Mild+\",\r\n    \"Mild To Moderate\",\r\n    \"Moderate\",\r\n    \"Moderate To Less Severe\",\r\n    \"Less Severe\",\r\n    \"Severe\",\r\n    \"Very Severe\"\r\n];\r\nvar colors = [\r\n    \"#B4CD80\",\r\n    \"#B3C74D\",\r\n    \"#F6E737\",\r\n    \"#F6E737\",\r\n    \"#F4D632\",\r\n    \"#E6AF2A\",\r\n    \"#D7841F\",\r\n    \"#C52F1F\",\r\n    \"#AD1923\",\r\n    \"#7F1B21\"\r\n];\r\n\r\nvar defaults = {\r\n    result: \"Clear\",\r\n    rc: \"#B4CD80\"\r\n};\r\n\r\nfunction calscore() {\r\n    let y = 0;\r\n    let x = 0;\r\n    let pap2 = 0;\r\n    let nod2 = 0;\r\n    let com2 = 0;\r\n    let nod = parseInt(document.getElementById(\"nod\").value[0]);\r\n    let pap = parseInt(document.getElementById(\"pap\").value[0]);\r\n    let com = parseInt(document.getElementById(\"com\").value[0]);\r\n    let sca = parseInt(document.getElementById(\"sca\").value[0]);\r\n    let inf = parseInt(document.getElementById(\"inf\").value[0]);\r\n    let pos = parseInt(document.getElementById(\"pos\").value[0]);\r\n    if (pap == 5) {\r\n        pap2 = 7;\r\n    } else if (pap != 1) {\r\n        pap2 = pap + 1;\r\n    }\r\n    if (nod != 1) {\r\n        nod2 = nod + 2;\r\n        nod2 = Math.min(6, nod2);\r\n    }\r\n    if (com > 3) {\r\n        com2 = 2;\r\n    } else if (com > 1) {\r\n        com2 = 1;\r\n    }\r\n    console.log(nod2, pap2, com2);\r\n    y = Math.max(nod2, pap2, com2);\r\n    if (sca == 3 && inf == 3) {\r\n        x = 4;\r\n    } else if (\r\n        (sca == 3 && inf == 2) ||\r\n        (sca == 2 && inf == 3) ||\r\n        (sca == 1 && inf == 3 && pos == 2)\r\n    ) {\r\n        x = 3;\r\n    } else if (\r\n        (sca == 2 && inf == 2) ||\r\n        (sca >= 2 && inf == 1 && pos == 2) ||\r\n        (sca == 1 && inf == 2 && pos == 2)\r\n    ) {\r\n        x = 2;\r\n    } else if (pos == 2) {\r\n        x = 1;\r\n    } else {\r\n        x = 0;\r\n    }\r\n    console.log(x, y);\r\n    let res = chart[x][y];\r\n    if (res == 3 && com < 5) res = 2;\r\n    return res;\r\n}\r\n\r\nfunction renderContainer () {\r\n    var div = document.createElement('div');\r\n    div.classList.add('App');\r\n    return div;\r\n}\r\n\r\nfunction renderTitle () {\r\n    var title = document.createElement('h2');\r\n    title.classList.add('title');\r\n    title.innerHTML = 'Multidimensional Acne Global Grading System';\r\n    return title;\r\n}\r\n\r\nfunction renderDiv (el, className) {\r\n    var div = document.createElement(el);\r\n    if(className) {\r\n      div.classList.add(className);\r\n    }\r\n    return div;\r\n}\r\n\r\nfunction renderSelect (id, options) {\r\n    var select = renderDiv('select', 'form-control');\r\n    select.id = id;\r\n    select.multiple = true;\r\n    var optionsLen = options.length;\r\n    for (var i = 0; i < optionsLen; i++ ) {\r\n        var option = renderDiv('option', '');\r\n        option.innerHTML = options[i];\r\n        if(i === 0) {\r\n            option.select = true;\r\n        }\r\n        select.appendChild(option);\r\n    }\r\n    select.addEventListener('click', function(e) {\r\n        handleClick();      \r\n    });\r\n    return select;\r\n}\r\n\r\nfunction renderLabel(id, text) {\r\n    var label = renderDiv('label', '');\r\n    label.htmlFor = id;\r\n    label.innerHTML = text;\r\n    return label;\r\n}\r\n\r\nfunction renderModule (data) {\r\n    var formGroup = renderDiv('div', 'form-group');\r\n    var label = renderLabel(data.id, data.label);\r\n    var select = renderSelect(data.id, data.options);\r\n\r\n    formGroup.appendChild(label);\r\n    formGroup.appendChild(select);\r\n    return formGroup;\r\n}\r\n\r\nfunction renderResult(result) {\r\n    var resultDiv = document.querySelector('#result');\r\n    if(!resultDiv) {\r\n        resultDiv = renderDiv('h1', '');\r\n        resultDiv.id = 'result';\r\n    }\r\n    \r\n    resultDiv.innerHTML = scale[result] || defaults.result;\r\n    resultDiv.style.backgroundColor = colors[result] || defaults.rc;\r\n\r\n    return resultDiv;\r\n}\r\n\r\nfunction handleClick() {\r\n    var res = calscore();\r\n    console.log(res);\r\n    renderResult(res);\r\n}\r\n\r\n\r\nfunction render() {\r\n    var appContainer = renderDiv('div', 'App');\r\n    var title = renderTitle();\r\n    var row = renderDiv('div', 'row');\r\n    var col1 = renderDiv('div', 'column');\r\n    var col2 = renderDiv('div', 'column');\r\n    var nodules = renderModule(nodulesData);\r\n    var papules = renderModule(papulesData);\r\n    var comedones = renderModule(comedonesData);\r\n    var scars = renderModule(scarsData);\r\n    var inflammation = renderModule(inflammationData);\r\n    var postInflam = renderModule(posData);\r\n    var resultDisplay = renderResult();\r\n\r\n    col1.appendChild(nodules);\r\n    col1.appendChild(papules);\r\n    col1.appendChild(comedones);\r\n    col2.appendChild(scars);\r\n    col2.appendChild(inflammation);\r\n    col2.appendChild(postInflam);\r\n    row.appendChild(col1);\r\n    row.appendChild(col2);\r\n\r\n    appContainer.appendChild(title);\r\n    appContainer.appendChild(row);\r\n    appContainer.appendChild(resultDisplay);\r\n    return appContainer;\r\n}\r\n\r\ndocument.querySelector('#App').appendChild(render());\r\n\r\n<\/script><\/code><\/pre>\r\n<!-- \/wp:code -->\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"parent":14,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-814","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dermatology.upenn.edu\/codelab\/wp-json\/wp\/v2\/pages\/814","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dermatology.upenn.edu\/codelab\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dermatology.upenn.edu\/codelab\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dermatology.upenn.edu\/codelab\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/dermatology.upenn.edu\/codelab\/wp-json\/wp\/v2\/comments?post=814"}],"version-history":[{"count":6,"href":"https:\/\/dermatology.upenn.edu\/codelab\/wp-json\/wp\/v2\/pages\/814\/revisions"}],"predecessor-version":[{"id":1100,"href":"https:\/\/dermatology.upenn.edu\/codelab\/wp-json\/wp\/v2\/pages\/814\/revisions\/1100"}],"up":[{"embeddable":true,"href":"https:\/\/dermatology.upenn.edu\/codelab\/wp-json\/wp\/v2\/pages\/14"}],"wp:attachment":[{"href":"https:\/\/dermatology.upenn.edu\/codelab\/wp-json\/wp\/v2\/media?parent=814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}