Eingabeformulare werden nicht angezeigt, wenn sie von einer anderen HTML-Datei gelesen werden

Question

Ich arbeite an einem Programm, das sichere Programmierpraktiken (AngularJS) lehrt, und ein Teil davon ermöglicht es den Schülern, auf Sicherheitslücken im Code zu klicken. Der Code wird als HTML-Datei eingelesen, in der sich Bereiche um Elemente befinden, auf die der Student klickt, aber ich versuche, sie interaktiver mit Eingabeformularen zu machen, die im selben Fenster erscheinen, das nach dem Erreichen eines Punktes erscheint.

ich in einer HTML-Datei durch JSON gerade lese wie so:

"code": "./securityChecklist.html", 

Es gibt keine Probleme. Dies ist die Datei:

#include <iostream> 
using namespace std; 
void getNames(string[], int); 
int getWhich(); 
string getName(int, string[],int); 
const int SIZE = 10; 

int main() 
{ 
    int which; 
    string names[SIZE]; 
    getNames(names,SIZE); 

    which =getWhich(); 
    string aName = getName(which,names,SIZE); 
    cout << "You choose name: " << aName; 

    return 0; 
} 


void getNames(string names[],size_t sz) 
{ 
    for (size_t i = 0; i < sz; i++) 
    { 
    cout << "type name # " << i+1 <<": "; 
    <span class="span-Pgm1CL Pgm1CL-var-input-Pgm1CL">cin >> names[i];</span> 
    <div class="clq"> 
     <fieldset name="q1"> 
      <label for="q1yes"> 
       <input value = "1" id="q1yes" type="radio"> 
       "Yes" 
      </label> 
      <label for="q1no"> 
       <input value = "2" id="q1no" type="radio"> 
       "No" 
      </label> 
     </fieldset> 
    </div> 
    } 
} 

size_t getWhich() 
{ 
    size_t x; 
    cout << "Which name: "; 
    <span class="span-Pgm1CL Pgm1CL-var-input-Pgm1CL">cin >> x;</span> 
    return x; 
} 

string getName(size_t n,string vals,size_t sz) 
{ 
    if (n >=1 && n <= sz) 
     return vals[n-1]; 
    else 
     return ""; 
} 

Das CLQ div Element mir Probleme gibt. Es sollte ein Optionsfeld laden.

<pre ng-switch-when="codeblock">{{ unit.code }}</pre> 

Aber stattdessen gibt es mir die Etiketten, aber keine Eingabeformular überhaupt. Alles was ich will, ist das kleine Radio.

Ich weiß, dass dies innerhalb eines pre Tags funktionieren sollte, wird also das Problem mit JSON geladen? Etwas mit Bootstrap-Styling? Eckiges JS ??

Heres, was ich bekommen:

Answer 1

Warum verwenden Sie einen <pre>-Tag? Müssen Sie vorformatierten Text/Code oder tatsächlich arbeitenden HTML-Code zeigen?

Wenn HTML-Code arbeiten, ist, was Sie wollen, können Sie mit erklären, die Radio-Buttons richtig starten:

<fieldset name="q1"> 
    <label for="q1yes"> 
     <input type="radio" name="q1" id="q1yes" value = "1"> "Yes" 
    </label> 
    <label for="q1no"> 
     <input type="radio" name="q1" id="q1no" value = "2"> "No" 
    </label> 
</fieldset> 

Bitte bemerke ich die name Attribute an die Eingangskontrollen hinzugefügt, sonst werden sie nicht richtig funktionieren (Vielleicht hast du das schon gewusst und es einfach vergessen).

Sie könnten auch den Tag HTML5 <code> verwenden. Take a look at this.

Bitte aktualisieren Sie mich, wenn das nicht das ist, was Sie brauchen, danke.