Beiträge von Failix

AndreasB  Sempervivum Ich weiß Eure Mühe sehr zu schätzen, herzlichen Dank! Und Ihr konntet tatsächlich Licht in mein Dunkel bringen.

Ich habe immer erst das Gefühl, etwas wirklich verstanden zu haben, wenn ich es in ganz einfache Worte fassen und jemand anderem erklären kann. Gelingt mir das nicht, ist es ein Zeichen dafür, dass ich selbst nicht wirklich Bescheid weiß.

In unserem Beispiel ist "nr" der Ball, den sich Funktion und Objekt zuspielen. Die Funktion wirft den Ball mit einer Zahl, das Objekt den Ball mit einem Wort zurück - wenn es denn eins hat. Ansonsten wirft es nur den Ball mit der Zahl zurück. Ich glaube, ich habe es jetzt wirklich verstanden. Und das ist ein wenig so, als ob der Schmerz nachlässt.

Ich wünsche Euch einen erfolgreichen Tag!

basti1012 Dieses Array war ursprünglich nicht vorhanden, sondern ich habe nur mit array.length gearbeitet. Und dabei tauchte halt die Frage nach dem Ersetzen auf.

Sempervivum Ich muss zugeben, dass ich diesen kompletten Code nicht verstehe:

function nrToWord(nr) {
  if (numberWordMap[nr]){
    return numberWordMap[nr];
  }
  return nr;
}

Ja, ich weiß, was er bewirkt, aber ich weiß nicht, warum. Oder anders gesagt: Ich kann diesen Code nicht mit ganz normalen Sätzen beschreiben.

Zeile 1: Es wird die variable "nrToWord" mit dem Parameter "nr" erstellt.

Zeile 2: Es wird eine Bedingung abgefragt ... welche, kann ich nicht ausdrücken.

Zeile 3: Bei Erfüllung der Bedingung wird etwas zurückgegeben ... was es ist, kann ich nicht ausdrücken.

Zeile 5: Etwas wird zurückgegeben ... aber was?

So böse sieht es mit meinen Kenntnissen derzeit aus. Wenn jemand meine angefangenen Sätze vervollständigen könnte, wäre ich wirklich sehr dankbar.

AndreasB Ich kenne den Operator || nur aus ganz simplen Abfragen. Wenn ich mir anschaue, was es hinter den von Dir geposteten Links zu lesen gibt, weiß ich, dass ich nichts weiß ... Deshalb verstehe ich wohl auch Deinen Ansatz aus #14 derzeit überhaupt nicht.

Sempervivum Vermutet habe ich das schon, kann mir nur nicht so richtig erklären, was die eckigen Klammern bedeuten. Aber, siehe oben ...

Kein guter Tag heute für mich. Einer von den Tagen, an denen man sich ganz klein und ahnungslos vorkommt und mächtigen Frust deswegen empfindet.

In meinem Videokurs sind wir in puncto Ersetzen bisher nicht über eine Schlange aus aneinander gehängten replace() hinausgekommen. Der Dozent meinte dazu, dass er später auf eine elegantere Methode eingehen würde – ich bin gespannt, wann es so weit ist. So richtig komme ich mit dem Kurs auch nicht voran, einfach zu wenig Zeit.

Aber immerhin funktioniert mein Quiz jetzt wieder etwas besser dank Eurer Hilfe. Ich wünsche Euch einen schönen Sonntagabend!

Ich hatte in #4 einen Link auf den Quelltext in seiner Version nach dem ersten Ersetzungsversuch gepostet, aber der war sicher nicht auffällig genug. Tut mir leid, wenn Ihr deswegen ein wenig rätseln musstet, aber für mich war das alles sehr interessant und lehrreich. RegEx werde ich immer wieder brauchen, und es wird Zeit, dass ich meine rudimentären Kenntnisse darin erweitere.

Also, noch einmal herzlichen Dank an alle!

Sempervivum Ich habe Deinen Quelltext ausprobiert, verstehe aber die Funktion nrToWord nicht wirklich. Was bewirkt diese Bedingung?

  if (numberWordMap[nr]) {
    return numberWordMap[nr];
  }

AndreasB Das mit dem konkreten Vergleich habe ich verstanden, den kann man ja auf verschiedene Weisen machen, da würde auch eine Kette aus Replace-Anweisungen wie in #10 ihren Dienst tun.

Was ich nicht kapiere, sind Lookup und Fallback. Ich bin noch ziemlicher Anfänger in JS, der Begriff Lookup begegnet mir gerade zum ersten Mal. Was ein Fallback ist, weiß ich theoretisch, nicht aber für genanntes Beispiel.

Weitere Infos sind also sehr, sehr willkommen.

Ich möchte mich ganz herzlich bei allen bedanken!

Ich habe alle hier gezeigten Varianten ausprobiert, jede hat ihren eigenen Einsatzzweck. Allerdings habe ich ein Problem mit dem Vorschlag aus #3, wie man hier sieht:

https://jsfiddle.net/wv2exsk4/1/

Im Script sind ab Zeile 89 die Ersetzungsausdrücke von 2 bis 12 definiert. Ab 13 soll keine Ersetzung mehr stattfinden. Mein Frage-Antwort-Objekt hat 13 Einträge, die 13 ist aber im Ersetzungsobjekt nicht definiert, also kommt es zum Ausgabefehler "undefined".

Wie bringe ich der Funktion bei, dass sie ab 13 stoppt?

Vielen Dank Euch beiden, ich probiere das alles aus, sobald ich wieder an meinem Rechner bin.

Herzlichen Dank! Bei 3. habe ich aber ein Verständnisproblem.

Ich habe doch das toString() angefügt, damit ich statt einer Zahl einen String bekomme. Nach meinem Verständnis ist die "3" dann einfach ein Stück Text, oder?

console.log(typeof questions.length.toString()) meldet, dass ich einen String bekomme. Allerdings stehen rechts und links keine Zeichen, deshalb ist der Regex hier wirkungslos, verstanden. Aber wie fange ich in meinem Fall diese "3" dann so ab, dass aus "13" nicht "1drei" wird?

Sempervivum Das funktioniert sehr gut, vielen Dank! Drei Fragen habe ich:

1. Wofür stehen "$1" und "$2" beim Ersetzungsausdruck?

2. Warum funktioniert bei mir zwar document.getElementById('testIt').innerHTML = ('Es sind 3 Fragen.').replace(/([^\d])3([^\d])/g, '$1drei$2');, aber nicht document.getElementById('testIt').innerHTML = ('Es sind 3 Fragen.').str.replace(/([^\d])3([^\d])/g, '$1drei$2');?

Der Editor sagt, "str.replace" ist für diesen Typ nicht vorhanden.

3. Das Ganze funktioniert gar nicht, wenn ich es in meinem Musik-Quiz an dieser Stelle benutzen will (Zeile 90): function countQuestions() { countQa.innerHTML = questions.length.toString().replace(/([^\d])3([^\d])/g, '$1drei$2');; }

Mit "str" wird die ganze Funktion lahmgelegt, ohne "str" wird das "replace" ignoriert.

AndreasB Das klingt spannend, vielen Dank! Ich werde mich eingehend damit beschäftigen, denn so eine Funktion werde ich garantiert immer wieder brauchen.

Hallo zusammen,

ich ersetze in einem String Zahlen durch Zahlwörter:

replace('2', 'zwei')

Das funktioniert prima, solange keine "12" ersetzt werden muss, denn dann kommt "1zwei" heraus. Ich hab' einige ergoogelte Versuche mit Regex unternommen, um das in den Griff zu kriegen, aber ohne brauchbares Ergebnis.

Wie macht man es korrekt, dass nur der exakte Ausdruck, in meinem Fall die Ziffer 2 zwischen den Hochkommas, ersetzt wird?

Danke und Gruß

Felix

Ich hab' mich in den letzten Jahren immer mal wieder an JavaScript versucht, aber hatte nie eine wirklich gute Lerngrundlage. Jetzt, seit einem reichlichen Monat, habe ich diesen Videokurs und merke, wie er zu wirken beginnt. Anfang August wusste ich noch nicht mal, wie man die Klammern in JavaScript setzt, und hätte jemand gesagt, ich solle eine Funktion erstellen, hätte ich bloß dumm geguckt. Und wenn ich mir mal einen JavaScript-Schnipsel ergoogelt hatte, um ihn in eine eigene Website einzubauen, konnte ich ihn nicht mal richtig interpretieren. Damit soll es nun vorbei sein.

Nachteil des Videokurses: Er ist teils sehr trocken, und wenn man etwas nicht versteht, kann man niemanden fragen. Deswegen bin ich echt froh, dass Ihr mir so prima helft. Denn ohne Hilfe bleibt man schnell hängen – gerade wenn man, wie ich, kein Naturtalent in Programmierung ist – und verliert den Spaß. Aber ohne den geht es nicht; Freude am Lernen ist das Wichtigste, denke ich.

Ich werde meinen Weg ab Januar noch konsequenter gehen, denn dann sitze ich für ein Jahr wieder auf der Schulbank und tauche ein in die Welt von Linux, Servern, Datenbanken und – worauf ich mich besonders freue – PHP. Auch hier habe ich nur rudimentäre Kenntnisse, weiß aber, was damit alles machbar ist. Und mit anderen gemeinsam zu lernen, macht natürlich noch mehr Spaß als allein vorm Video ...

Ich hab' mir Deinen Code angeschaut. Und ich würde lügen, wenn ich schriebe, ich hätte ihn sofort verstanden. Es ist halt ein anderer Stil, und mir fehlt noch die Erfahrung, schnell auch in fremden Code einzusteigen. Aber ich weiß ja, worum es geht ...

Ich lerne Javascript in einem Videokurs, bei dem ich seit Mitte August noch nicht mal die Hälfte geschafft habe. Und natürlich übernehme ich den Stil des Dozenten. Neulich hab' ich mal geschaut, was am Ende des Kurses auf mich zukommt, und bin blass geworden: Ich habe so gut wie nichts verstanden. Da liegt noch ein ganzes Stück des Weges vor mir.

Was ich an Deinem Entwurf witzig finde, ist die Funktion am Ende. Und das bringt mich auf Ideen: Man könnte ja auch die Zeit zur Beantwortung einer einzelnen Frage begrenzen. Und wenn ich noch mehr gelernt habe, könnte ich eine Anmeldefunktion schreiben, mit der man seine persönlichen Highscores speichern und gegen andere Spieler antreten könnte. Ach ja, Möglichkeiten gibt es viele ... leider viel mehr, als ich Zeit zur Verfügung habe.

Übrigens: Den hübschen Transition-Effekt auf den Antwortbuttons bei 469 Pixeln bekommen nur Leute mit, die mit den DevTools die Responsivität einer Seite testen. Aber wer macht das schon ...

Heute werde ich mal meinen Videokurs fortsetzen, statt an meinem Spiel weiterzubasteln. Im Kurs geht es jetzt um eine To-do-Liste, also auch um das Speichern von Werten aus einem Text-Input. Das wird spannend ...

Euch noch einmal ganz herzlichen Dank für Eure Hilfe! Und ich verspreche, ich werde Euch wieder nerven.

So, für heute ist es geschafft:

https://jsfiddle.net/m9826yvo/1/

Sicherlich gibt es noch den einen oder anderen Verbesserungsvorschlag, aber ich bin wieder ein Stück weiter gekommen und konnte den HTML-Code deutlich entschlacken.

Sempervivum Gut, dass Dir dieses HTML-Konstrukt für die Radiobuttons aufgefallen ist. Ich hatte mir das mal ergoogelt, weil ich für Mobilgeräte komplette Paragraphen oder Divs als Touchelemente haben wollte statt der schwer zu treffenden Radiobuttons. Aber, wie schon geschrieben, waren diese bereits obsolet.

Als Nächstes möchte ich einen Punktezähler einbauen, mit einer Gewinnstaffelung wie bei "Wer wird Millionär": 15 Fragen und zwei Sicherheitsstufen. Vermutlich wird es auch da kleinere oder gar größere Problemchen geben ...

basti1012 Du kannst jetzt gern Deinen Vorschlag posten, mein Kopf ist erst mal wieder frei.

Wiederum herzlichen Dank! Den querySelector hatte ich heute morgen schon beim Wickel, muss ihn aber wohl falsch angewendet haben.

Und was span und p angeht: Guter Tipp! Ich brauche dieses Konstrukt gar nicht mehr, ich brauche nicht mal mehr Radiobuttons, da man ja bei einem falschen Klick das Spiel verlässt. Es muss nur der Button, hinter dem sich die richtige Antwort verbirgt, eingefärbt werden, was ich mit querySelector('#divAnswers p:active') erreiche. Jetzt muss ich die Farbe vor der nächsten Spielrunde nur wieder loswerden - daran bastle ich gerade und melde mich dann wieder ...

---

Kurze Zeit später: Zu früh gefreut, das mit querySelector('#divAnswers p:active') hat nur funktioniert, weil ich im Chrome die DevTools geöffnet hatte. Im Normalzustand ist es wirkungslos, auch andere Pseudoklassen funktionieren hier nicht.

Also muss ich konkret den Button identifizieren, dem der Wert true zugewiesen wurde, und diesem Button eine andere Hintergrundfarbe geben. Die Position des Wertes true entspricht der Ziffer in der ID des Buttons. Daraus muss sich doch was machen lassen ...

Es ist geschafft!

https://jsfiddle.net/t4qebu7d/1/

Was mir nicht gefällt, ist function resetAnswer() ab Zeile 55. Hiermit setze ich nur die Hintergrundfarbe des zuvor gewählten Radiobuttons zurück. Richtig wäre es, ein uncheck anzuwenden, aber ich weiß (noch) nicht, wie ich das Element anspreche. Falls jemand einen Tipp geben möchte ...

In jedem Fall freue ich mich gerade wie ein kleiner Junge, der ein neues Spielzeug bekommen hat.

Und ich bin sehr froh, dass ich Euch und dieses Forum gefunden habe ... kann gar nicht oft genug "Danke!" sagen.

basti1012 Gern schaue ich mir auch Deine Variante an, vielen Dank! Dass beim Programmieren viele Wege nach Rom führen, weiß ich, bin aber froh, wenn ich erst mal einen der möglichen Wege gehen kann. Das ist alles spannendes Neuland für mich. Und ja, Lernen macht mir großen Spaß – was nutzt mir eine fertige Lösung, wenn die nächste Herausforderung dann wieder nicht zu bewältigen ist ...

Sempervivum Ich habe Deinen Code eingebaut und glaube, ich verstehe sogar, was er tut. Darauf gekommen wäre ich allerdings nicht, muss ich zugeben. Ich beginne jetzt, die Aktionen für die Antworten einzubauen und hoffe, ich komme selbst ein Stückchen weiter. Leider habe ich heute nicht so viel Zeit dafür wie an den letzten beiden Tagen. Und natürlich wieder: herzlichen Dank!

Sempervivum Ich hab' mal angefangen, mich mit Deinem Vorschlag aus #2 zu beschäftigen. Hier ein Fragment:

'use strict';

const questions = [
  {
    question: 'Welche Band veröffentlichte 1980 das Album "Paris"?',
    answers: ['Queen', 'Visage', 'Supertramp', 'ELO'],
    isCorrect: [false, false, true, false]
  },
  {
    question: 'Auf welchem Pink-Floyd-Album wird eine Atombombe abgeworfen?',
    answers: ['The Wall', 'The Final Cut', 'The Endless River', 'The Dark Side of the Moon'],
    isCorrect: [false, false, true, false]
  },
];

let i = 0;

document.getElementById('nrQuestion').innerHTML = i + 1;
document.getElementById('question').innerHTML = questions[0].question;
document.getElementById('answer1').innerHTML = questions[0].answers[0];
document.getElementById('answer2').innerHTML = questions[0].answers[1];
document.getElementById('answer3').innerHTML = questions[0].answers[2];
document.getElementById('answer4').innerHTML = questions[0].answers[3];

document.getElementById('answer1').addEventListener('click', () => {
  if (questions[i].isCorrect[0] === true) {
    alert()
  }
})
document.getElementById('answer2').addEventListener('click', () => {
  if (questions[i].isCorrect[1] === true) {
    alert()
  }
})
document.getElementById('answer3').addEventListener('click', () => {
  if (questions[i].isCorrect[2] === true) {
    alert()
  }
})
document.getElementById('answer4').addEventListener('click', () => {
  if (questions[i].isCorrect[3] === true) {
    alert()
  }
})

Mir kommt dieser Ansatz viel zu kompliziert vor. Das geht sicherlich einfacher, oder?

Einen schönen Abend wünsche ich!

Ich bin gerade dabei, die Funktionen zu erstellen – es wird übersichtlicher. Anschließend versuche ich, die Funktionalität selbst in den Griff zu bekommen, der Nachmittag ist ja noch lang ...

Nachtrag eine Stunde später ...

Es ist geschafft – Code deutlich gestrafft und alle Funktionen wunschgemäß eingerichtet: https://jsfiddle.net/ptkv6ahL/

Dann geht's jetzt an die Optimierung des HTML-Codes. Sempervivum Danke, danke, danke!

Ganz herzlichen Dank, ich schätze Deine Hilfe sehr. Die Auslagerung in Funktionen und die Vereinfachungsschritte aus #2 sind meine nächste Aufgabe, wenn dieses Script so funktioniert, wie ich es mir wünsche.

Mit dem Code aus #10 funktioniert es nicht, leider. Beantwortet man eine Frage falsch, wird nach dem Neustart zwar wieder die erste Frage angezeigt, aber man kommt nicht weiter – alle Funktionen sind dann außer Kraft.

Hier ein vereinfachtes Beispiel mit nur der ersten Frage: https://jsfiddle.net/e4nroq5w/

Es reicht, eine falsche Antwort zu geben – beim zweiten Versuch ist keine der Klickfunktionen mehr aktiv. Löscht man die Zeilen 88 bis einschließlich 97, funktionieren sie wieder. Was muss anders gemacht werden?

Ich habe nun das korrekte Beispiel hochgeladen:

https://jsfiddle.net/zaypxtjd/

Beantwortet man eine der Fragen falsch, wird das Spiel abgebrochen. Man hat aber auf der Fehlerseite, die erscheint, die Möglichkeit, wieder ins Spiel einzusteigen. Derzeit landet man mit einem Klick auf den Button mit der ID "repeater" jedoch nicht am Anfang des Spiels, wie ich es mir wünsche, sondern bei der zuletzt falsch beantworteten Frage. Klar, der Zähler wird ja nicht zurückgesetzt ...

Also dachte ich mir, ich kann dem Klick auf den Repeater-Button ein i = 0; mitgeben (s. Zeile 99), aber das war eine naive Vorstellung, es funktioniert so nicht. Und auch keiner der anderen Versuche, die ich unternommen habe, funktioniert. Ich bin mit meinem Latein resp. meinem JavaScript am Ende.

Die Frage ist also: Wie schaffe ich es, dass nach einem Fehler das Spiel von Anfang an startet, nicht mittendrin?

Du hast vollkommen recht – mein Codebeispiel ist nicht das, was ich auf meinem lokalen Rechner habe. War wohl ein bisschen viel Javascript heute ...

Morgen lade ich das richtige Beispiel hoch, auf das sich meine Frage bezieht. Schönen Abend und schönes Wochenende!