1
Ich versuche gerade ein Quiz für meine Rails-App auf c9 mit js zu programmieren, aber die js scheint nicht in die View-Datei geladen zu werden. Kann mir jemand sagen, was falsch ist oder eine Reparatur vorschlagen?Rails view JavaScript wird nicht geladen
Die Homepage mit dem Quiz auf es starten:
<div class = "signinstyle">
<div class = "row">
<div id="wrapAll">
<div id="wrapper">
<img id="logo" src="img/geek.png" alt=""><br>
<h1>Help us recommend a <span>Course</span></h1>
</div>
</div>
</div>
<div class ="row">
<div id="wrapper">
<input class="start-btn" type="submit" value="Start!" onclick="redirect('ques.html')">
</div>
</div>
</div>
<script src='main.js' type='text/javascript'></script>
Die Ansicht, die die Fragen der js ziehen soll:
<!--Functionality of recommender?? -->
<% provide(:title, '') %>
<!--containers for design/layout -->
<div class = "signinstyle">
<div class = "row">
<!--Page information -->
<div id="wrapAll">
<div id="wrapper">
<div class="ques-wrap">
<h2 id="ques">This is question</h2>
<input class="btn1" type="submit" id="opt1" value="Option 1" onclick="optionClick('1')">
<input class="btn2" type="submit" id="opt2" value="Option 2" onclick="optionClick('0')">
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<script src='main.js' type='text/javascript'></script>
<script type='text/javascript'>
window.onload = function(){
generate();
};
</script>
Die Anwendung Layout-Ansicht:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= yield(:title) %> | Uni2choose</title>
<%= javascript_include_tag "https://www.google.com/jsapi", "chartkick" %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'layouts/navbar' %>
<%= render 'layouts/header' %>
<br><br><br><br>
<% flash.each do |message_type, message| %>
<div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>
<%= yield %>
<%= render 'layouts/footer' %>
</body>
</html>
Die Datei main.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require chartkick
//= require turbolinks
//= require_tree .
var data = {
questions: [{
question: "Which interests you most?",
options: [ "Medicine" , "Drama" ]
}, {
question: "Which interests you most?",
options: [ "Biology" , "Music" ]
}, {
question: "Which interests you most?",
options: [ "Chemistry" , "Sculpting" ]
}, {
question: "Which interests you most?",
options: [ "Psychology" , "Design" ]
}, {
question: "Which interests you most",
options: [ "Animals" , "Art" ]
}, {
question: "Which interests you most",
options: [ "Maths" , "Outdoors" ]
}, {
question: "Which interests you most?",
options: [ "Engineering" , "English" ]
}, {
question: "Which interests you most?",
options: [ "Computing" , "Ancient history" ]
}, {
question: "Which interests you most?",
options: [ "Physics ", "Dance" ]
}, {
question: "Which interests you most?",
options: [ "Geography" , "Fashion" ]
}, {
question: "Which interests you most?",
options: [ "History" , "Dentistry" ]
}, {
question: "Which interests you most?",
options: [ "Debating" , "Photography" ]
}, {
question: "Which interests you most?",
options: [ "Creative Writing" , "Accounting" ]
}, {
question: "Which interests you most?",
options: [ "Archaeology " , "Hospitality" ]
}, {
question: "Which interests you most?",
options: [ "Construction " , "Teaching" ]
}, {
question: "Which interests you most?",
options: [ "Graphics" , "Philosophy" ]
}, {
question: "Which interests you most?",
options: [ "Business" , "Drawing" ]
}, {
question: "Which interests you most?",
options: [ "Nutrition" , "Politics" ]
}, {
question: "Which interests you most?",
options: [ "Sports" , "IT" ]
}, {
question: "Which interests you most?",
options: [ "Economics" , "Languages" ]
},],
geeks: [
{
name: "Linus Torvalds",
info: "Linus Benedict Torvalds is a Finnish American software engineer, who was the principal force behind the development of the Linux kernel that became the most popular kernel for operating systems."
}, {
name: "Dennis Ritchie",
info: "Dennis MacAlistair Ritchie was an American computer scientist. He created the C programming language and, with long-time colleague Ken Thompson, the Unix operating system."
}, {
name: "Bill Gates",
info: "William Henry 'Bill' Gates III is an American business magnate, philanthropist, investor, computer programmer, and inventor."
}, {
name: "Steve Jobs",
info: "Steven Paul 'Steve' Jobs was an American entrepreneur, marketer, and inventor, who was the cofounder, chairman, and CEO of Apple Inc."
}, {
name: "Steve Wozniak",
info: "Stephen Gary 'Steve' Wozniak, known as 'Woz', is an American inventor, electronics engineer, and computer programmer who co-founded Apple Computer with Steve Jobs and Ronald Wayne."
}, {
name: "Mark Zuckerberg",
info: "Mark Elliot Zuckerberg is an American computer programmer and Internet entrepreneur. He is best known as one of five co-founders of the social networking website Facebook. Zuckerberg is the chairman and chief executive of Facebook, Inc."
}, {
name: "Tim Berners-Lee",
info: "Sir Timothy John 'Tim' Berners-Lee, also known as TimBL, is an English computer scientist, best known as the inventor of the World Wide Web."
}]
};
var qIndex = 0,
index = 0,
aString = "",
maxQ = 20,
q = document.getElementById('ques'),
opt1 = document.getElementById('opt1'),
opt2 = document.getElementById('opt2');
function generate(){
q.innerHTML= data.questions[qIndex].question;
opt1.value= data.questions[qIndex].options[0];
opt2.value= data.questions[qIndex].options[1];
}
function optionClick(ans) {
if(qIndex%2==0){
aString+=ans;
index++;
}
qIndex++;
if(qIndex == maxQ){
redirect("result.html?" + generateResult(aString));
} else{
generate();
}
}
function generateResult(answers) {
if(answers=="11110" || answers=="11000" || answers=="01000") return 0;
else if(answers=="11111" || answers=="01010") return 1;
else if(answers=="10011" || answers=="00111" || answers=="00101") return 2;
else if(answers=="10100" || answers=="00110" || answers=="00000") return 3;
else if(answers=="10101") return 4;
else if(answers=="11101" || answers=="10010" || answers=="01111") return 5;
else return 6;
}
function showResult() {
var id = window.location.search.substring(1);
var Geeks = data.geeks;
var totalGeeks = Object.keys(Geeks).length - 1;
if(id > totalGeeks || id < 0 || !id) redirect("index.html");
var name = document.getElementById("geekName");
var info = document.getElementById("geekInfo");
var img = document.getElementById("geekImage");
name.innerHTML = Geeks[id].name;
img.src = "img/"+id+".png";
img.alt =Geeks[id].name;
info.innerHTML = Geeks[id].info;
}
function redirect(url) {
window.location = url;
}
in den beiden Ansichten, also in neuen HTML und den Fragen, oder innerhalb der Anwendung Layout auch? Es scheint nicht zu funktionieren, ich kann versuchen, eine Vorkompilierung in die Assets rb hinzuzufügen? – Djangert
Hinzufügen einer Vorkompilierung zusammen mit Ihrer Änderung sortiert das Problem, Prost. – Djangert