softgandhi / ng2-quiz

A general purpose quiz application developed in angular (updated to angular 8) that can be used for multiple purpose.

ng2-quiz

A general purpose quiz application developed in angular (version 8) that can be used for multiple purpose. + +For detailed documentation, please go to: https://www.codeproject.com/Articles/1167451/Quiz-Application-in-Angular

Please raise a pull request for any bug fix or if you have implemented a new feature and feel it is useful.

ng2-quiz's Issues

Update Quiz to Angular 5.x

This is being submitted as a suggestion for an enhancement to this already excellent quiz app. These are the steps I took to use it in an Angular-cli 1.6.2 app running on Angular 5.1.2 (as a component, rather than a standalone app).

• Created the Quiz component with ng g component [name] and copied this project's HTML code verbatim.
• Copied the Models and Services folders as siblings of the App folder, and the Data folder one level higher.
• Moved the CSS at the root of this project into my new component's CSS file.
• Modified the project's .angular-cli.json file to serve the .json test files from the assets folder in the distribution as shown here, and then modified ./services/quiz.server.ts paths inside the getAll function:

getAll() {
    return [
      { id: 'assets/aspnet.json', name: 'Asp.Net' },
      { id: 'assets/csharp.json', name: 'C Sharp' },
      { id: 'assets/designPatterns.json', name: 'Design Patterns' }
    ];
  }

• After updating to the new HttpClient @angular/common/http properties of text and json were no longer available on the retrieved object in quiz.service.ts get method and it was shortened to:

get(url){
  return this.http.get(url).map(res => <Response>res);
}

• Routed to the quiz component as to any other, and of course imported and declared it in the app module.

How to make data load more random question

How can be developed this feature where only 10 question can be loaded from the JSON file having 100 question. Looking for this help.

Failed to compile

Im really new to Angular and typescript so it could be due to my lack of knowledge (If that is the cause - i apologise).
After cloning the app with git i entered the ng2-quiz folder with cmd and entered npm install, then updated angularCLI with npm install --save-dev @angular/cli@latest
After installing it i tried to compile it with ng serve and received the following

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-03-22T17:09:16.159Z
Hash: be5111cd8cd6c7cfe85a
Time: 9779ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.93 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 636 bytes [initial] [rendered]
chunk {scripts} scripts.bundle.js (scripts) 280 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 517 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 853 kB [initial] [rendered]

ERROR in node_modules/@angular/common/src/directives/ng_class.d.ts(48,34): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/aot/compiler.d.ts(71,32): error TS2304: Cannot find name 'Map'.
node_modules/@angular/compiler/src/compile_metadata.d.ts(334,20): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/compile_metadata.d.ts(336,28): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/compile_metadata.d.ts(338,15): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/compile_metadata.d.ts(340,23): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/compile_metadata.d.ts(342,17): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/compile_metadata.d.ts(344,25): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/metadata_resolver.d.ts(70,61): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/metadata_resolver.d.ts(75,89): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/output/output_ast.d.ts(514,63): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/view_compiler/type_check_compiler.d.ts(30,161): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/change_detection/differs/default_iterable_differ.d.ts(12,32): error
TS2304: Cannot find name 'Iterable'.
node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(24,16): error
TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(32,16): error
TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/change_detection/differs/iterable_differs.d.ts(14,48): error TS2304: Cannot find name 'Iterable'.
node_modules/@angular/core/src/change_detection/differs/keyvalue_differs.d.ts(22,18): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/di/reflective_provider.d.ts(87,123): error TS2304: Cannot find name
'Map'.
node_modules/@angular/core/src/di/reflective_provider.d.ts(87,165): error TS2304: Cannot find name
'Map'.
node_modules/@angular/platform-browser/src/browser/browser_adapter.d.ts(79,33): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(97,42): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/dom/shared_styles_host.d.ts(11,30): error TS2304: Cannot find name 'Set'.
node_modules/@angular/platform-browser/src/dom/shared_styles_host.d.ts(22,30): error TS2304: Cannot find name 'Set'.
node_modules/rxjs/Observable.d.ts(58,60): error TS2693: 'Promise' only refers to a type, but is being used as a value here.
node_modules/rxjs/Observable.d.ts(73,59): error TS2693: 'Promise' only refers to a type, but is being used as a value here.
src/app/app.component.ts(10,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this
warning.
src/app/app.module.ts(22,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/app/quiz/quiz.component.ts(13,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/app/quiz/quiz.component.ts(55,7): error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.
src/app/quiz/quiz.component.ts(78,29): error TS2339: Property 'find' does not exist on type 'Option[]'.
src/app/services/helper.service.ts(4,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/app/services/quiz.service.ts(7,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.


webpack: Failed to compile.

I tried fixing it by changing the "target": "es5" to "target": "es6" in tsconfig.json because it was the usual cause of problems but it didnt help.