> For the complete documentation index, see [llms.txt](https://docs-kr.zep.us/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-kr.zep.us/creator/tutor/custom-label/type-j.md).

# Type-J

Type-J는 레벨이 있는 미니 게임에서 자주 쓰이는 Custom Label 입니다.

똥 피하기 게임에서 쓰인 것을 볼 수 있습니다.

### 이미지

<figure><img src="https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2Fj0EpVI8qt0oqf7PRRauP%2FMask%20group-9.png?alt=media&amp;token=625a0816-92e1-4e98-a9c4-f01cb2bebb28" alt=""><figcaption></figcaption></figure>

### 예제 코드

```javascript
function showLabelTypeJ(player, key, text1, text2, text3) {
    const isMobile = player.isMobile;
    const topGap = isMobile ? 10 : -2; // 60px from the top on mobile and 48px on PC.
    /**
     * size based @labelPercentWidth
     * XL: isMobile ? 90 : 50;
     * L: isMobile ? 80 : 40;
     * M: isMobile ? 70 : 28;
     * S: isMobile ? 60 : 20
     */
    const labelPercentWidth = isMobile ? 60 : 20;
    const labelDisplayTime = 300000;

    const directionColumnStyle = `
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center;`.trim();

    const rowStyle = `
    display: flex; 
    align-items: center;
    justify-content: center;
    text-align: center;
    `.trim();

    const spanStyle = `
    font-size: ${isMobile ? "14px" : "18px"};
    font-weight: 700; 
    color: white;`.trim();

    const highlightSpanStyle = `
    font-size: ${isMobile ? "14px" : "18px"};
    font-weight: 700; 
    color: #FFEB3A;`.trim(); // Show red(#FF5353) when timeout is about to expire 

    const customLabelOption = {
        key: key,
        borderRadius: '12px',
        fontOpacity: false,
        padding: '8px',
    }

    let htmlStr = `
<span style="${directionColumnStyle}">
    <span style="${spanStyle}">${text1}</span>
    <span style="${rowStyle}">
        <span style="${spanStyle}">${text2}</span>
        <span style="${highlightSpanStyle}">${text3}</span>
    </span>
</span>`;

    player.showCustomLabel(htmlStr.trim(), 0xffffff, 0x27262e, topGap, labelPercentWidth, 0.64, labelDisplayTime, customLabelOption);
}
```