plugins/org.eclipse.papyrus.gamification/html/gamehint.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hint Request</title>
    <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://papygame.com/papyrus-plugin/css/oyo-playview-style.css">
    <script src="https://kit.fontawesome.com/1f712cb951.js" crossorigin="anonymous"></script>
      <script src="https://papygame.com/papyrus-plugin/js/oyo-playview-script.js"></script>
      

    <style>
        html {
            height: 100%;
        }

        body {
            background: #f7f7f7;
            font-family: 'Share Tech Mono', monospace;
            display: flex;
            vertical-align: middle;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        #content {
            display: inline-block;
            margin-left: 20px;
        }

        #levelLabel {
            text-transform: uppercase;
            font-size: 3em;
            margin: 0;
            color: #cf2c2f;
        }

        #levelLabel:before {
            font-family: "Font Awesome 5 Free";
            content: '\f00d';
            display: inline-block;
            vertical-align: middle;
            font-weight: 900;
            padding-bottom: 10px;
            margin-right: 10px;
            font-size: 0.7em;
        }


        #rewards {
            font-size: 2em;
        }

        #statistics {
            margin-top: 8px;
            font-size: 1.1em;
        }

        #statistics > p {
            display: inline-block;
            margin: 0 15px 0 0;
        }

        #statistics > p > i {
            margin-right: 5px;
        }

        p.xp {
            margin: 0;
            color: #273C66;
            display: inline;
        }

        .fa-coins {
            color: #ffa500;
        }

        .fa-dizzy {
            font-size: 9em;
            display: inline-block;
            color: #273C66;
        }

        #resumeToDashboard {
            padding: 12px 30px;
            font-size: 1em;
            margin-top: 10px;
            text-transform: uppercase;
            float: right;
            letter-spacing: 0.05em;
            font-family: 'Share Tech Mono', monospace;
            background: #273C66;
            border-radius: 3px;
            border: none;
            color: white;
            cursor: pointer;
            transition: 0.1s;
        }

        #resumeToDashboard:hover {
            background: #3f7fc0;
            transition: 0.1s;
        }
    </style>
</head>
<body>
<div>
    <div>
           <img src="https://papygame.com/papyrus-plugin/img/hint.png" alt="" />
           
        <div id="content">
            <p id="hintLabel">HINT TEXT</p>
            
            <div id="rewards">
				<button id="testProposition" class="button proposition-button">Submit my model</button>
			</div>
            
            <!--<div id="statistics">
                <p id="moves"><i class="fas fa-hand-point-right"></i>3 moves</p>
                <p id="errors"><i class="fas fa-times-circle"></i>2 errors</p>
                <p id="time"><i class="fas fa-stopwatch"></i>243 seconds</p>
            </div>-->
        </div>
    </div>
     
 
</div>

</body>

<script>
    window.onload = function () {
        pageLoaded();
    }
    function displayHint(hint){
		// result.okMoves
		//+result.errors//
		//+result.timeSpent
		document.getElementById("hintLabel").innerHTML = hint;
        // document.getElementById("moves").innerHTML = "<i class=\"fas fa-hand-point-right\"></i>"+"ewrewr move(s)";
        // document.getElementById("errors").innerHTML = "<i class=\"fas fa-times-circle\"></i>" + " ewrew error(s)";
        // document.getElementById("time").innerHTML = "<i class=\"fas fa-stopwatch\"></i>" + "werer  seconds";
	}


</script>
</html>