Find the highest value key in an object, then post it to an innerHTML
<p>I have an object that i'm tallying quiz question results in.</p>

<pre><code>var answerData = {
    "Ninja": { score: 4 },
    "Robot": { score: 1 },
    "Pirate": { score: 7 },
    "Zombie": { score: 2 }
}
</code></pre>

<p>I'd like to determine which attribute is the highest then post the results to the page. </p>

<p>I found a post here on stackoverflow that suggested using object.reduce() to get a final result. I can't get it to return the highest value of 'pirate', instead it returns the last value of 'zombie'. </p>

<pre><code>  function finalResults {
        theAnswer = Object.keys(answerData).reduce(function(a, b){ return answerData[a] &gt; answerData[b] ? a : b });

        document.getElementById("finalResulthere").innerHTML = "&lt;p&gt;Congratulations you are a " + theAnswer +".&lt;/p&gt;";
}
</code></pre>

<p>To then post it to </p>

<pre><code>&lt;div id="results"&gt;
  &lt;div id="finalResulthere"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>My alternative thoughts were to run chained IF statements comparing the values of each of the object keys. This appeared to be neater...</p>