HTML/CSS - Drag n drop - Quiz Online Editor and JavaScript Compiler

html

<head>
<link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
</head>
<body>
<div id="container">
    <em class="title">Drag and drop the elements</em>
    <div id="container2">    
        <div id="left">
            <p>I am enough of an artist to draw freely upon my imagination.</p>
            <p>Thoroughly conscious ignorance is the prelude to every real advance in science.</p>
            <p>Nobody ever figures out what life is all about, and it doesn't matter. Explore the world.</p>
            <p>So it is more useful to watch a man in times of peril, and in adversity to discern what kind of man he is.</p>
        </div>
        <div id="right">
            <p id="Einsteinq" ondrop="drop(event)" ondragover="allowDrop(event)">1.</p>
            <p id="Maxwellq" ondrop="drop(event)" ondragover="allowDrop(event)">2.</p>
            <p id="Feynmanq" ondrop="drop(event)" ondragover="allowDrop(event)">3.</p>
            <p id="Lucretiusq" ondrop="drop(event)" ondragover="allowDrop(event)">4.</p>
            
            <br><br><em>Who said that? Drag and drop the names of the authors in the correct order.</em>
            <br>
            <button onclick="runNow()">Check ✔</button>
        </div>
    </div>
    
    <span id="Lucretius" draggable="true" ondragstart="drag(event)">Lucretius</span>

css

body {
    background-color: lightblue;
    display:flex;
    justify-content:center;
}
#container {
    margin-top:10%;
    margin-bottom:10%;
    max-width:500px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    position:absolute;
    background:  silver;
    padding:20px;
    border-radius: 8% 39% 0 0;
}
#container2 {
    flex-direction:row;
    justify-content:space-around;
    display:inherit;
    width:100%;
    position:relative;
    margin-top:30px;
  
}

var authors = ["Lucretius","Einstein","Maxwell", "Feynman"];
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function func() {
document.write(document.getElementById("Fermat").parentNode.id);}
function runNow() {
for(i=0; i<authors.length; i++)
{
var ans = document.getElementById(authors[i]);
if (ans.parentNode.id==(authors[i]+"q")) {
}
else {
return alert("Wrong! Try again.");

BROWSER

Console