What you are pasting into the HTML snippet is not pure JavaScript. It is HTML wrapping the JavaScript, hence you should go for the HTML option in the widget. The files you need can typically be stored in the resources folder, by adding a new ‘flipclock’ folder for your functionality.
But, if I look at your code, I would suggest to make it a widget by itself, so not via the HTML snippet.
I think what is just problem with my understanding
I found sample for using this scripts:
<html>
<head>
<link rel="stylesheet" href="../compiled/flipclock.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../compiled/flipclock.js"></script>
</head>
<body>
<div class="clock" style="margin:2em;"></div>
<script type="text/javascript">
var clock;
$(document).ready(function() {
clock = $('.clock').FlipClock({
clockFace: 'TwentyFourHourClock'
});
});
</script>
</body>
</html>
But, where is i must place (in Mendix) these scripts
<link rel="stylesheet" href="../compiled/flipclock.css">
<script src="../compiled/flipclock.js"></script>